Как добавить инпуту нижнее подчеркивание?

Question

[Marro420]

вот стили инпутов

.data{
   background-color: #0e0e0e;
   color: white;
   border:none!important;
    margin: 10px 0;
   height: 30px;
   font-size: 20px;
   
   border-color: #515151;
   border-bottom-width: 2px;
   border-style: solid;
  outline: none;
   -webkit-border-bottom: 1px solid #515151!important;
   -webkit-tap-highlight-color: transparent;
   padding: 10px 15px;
   margin-bottom: 10px;
   user-select: none;
}

не получается добавить нижнее подчеркивание для полей ввода в safari

Comments

[Marro420]

либо подчеркивания нет совсем, либо подчеркивание всего элемента

[Ankhena]

Marro420, border-bottom: 1px solid #515151 даст нижнюю границу у инпута
И не нужно в своей верстке использовать !important. Вам же будет легче.

либо подчеркивания нет совсем, либо подчеркивание всего элемента

Вторая часть не совсем понятна.

И вы с версией Сафари разобрались?

[Marro420]

Ankhena, я разобрался, на винду я скачал максимально позднюю версию 5.1.7 что как я понял не стоило делать, просто друга с айфоном попросил посмотреть форму на сайте

[Marro420]

Ankhena, про вторую часть я имею ввиду либо свойство border работает полностью вокруг всего элемента, либо его нет совсем

[Антон Литвиненко]

Вообще и в сафари должно работать border: none (или border: 0) и затем border-bottom: 1ps solid #цвет;
Плюс для сафари надо принудительно сбрасывать бордер радиус

Answer 1

[IvanIF]

Попробуйте убрать !important у border:none!important;.

Comments

[Marro420]

я понял в чем была моя проблема, надо было прописать свойство box-shadow равное нулю