Safari, похоже, не знает разницы между border-top и border-bottom

Question

Я пытаюсь сделать так, чтобы при фокусировке нижняя граница текстовой области была окрашена, и когда она не выбрана, ее серый, левый, правый и верхний должны быть невидимыми, просто пустыми. Так что в Chrome и других браузерах это (проверьте jsfiddle) работает, но если вы запустите его на сафари, похоже, он не знает разницы между атрибутами border-top и border-bottom. Я думаю, что это просто что-то глупое, я просто не понимаю, что это такое.

input[type=text] { 
 
    width: 100%; 
 
    padding: 12px 20px; 
 
    margin: 8px 0; 
 
    box-sizing: border-box; 
 
    border: none; 
 
    border-bottom: 2px solid grey; 
 
    outline: none; 
 
} 
 
input[type=text]:focus { 
 
    width: 100%; 
 
    height: auto; 
 
    //This made me think that since the left, right, and top weren't designated it was filling those in automatically, but if you uncomment the next few lines you will see that left and right work, but if I set top to 0px it also sets the bottom to 0px. And I have no idea why safari is doing this 
 
    //border-left: 0px; 
 
    //border-right: 0px; 
 
    //border-top: 0px; 
 
    border-bottom: solid 2px transparent; 
 
    -moz-border-image: -moz-linear-gradient(left, #DEAFDB 0%, #EFB9AD 100%); 
 
    -webkit-border-image: -webkit-linear-gradient(left, #DEAFDB 0%, #EFB9AD 100%); 
 
    border-image: linear-gradient(to right, #DEAFDB 0%, #EFB9AD 100%); 
 
    border-image-slice: 1;

<form> 
 

 
<label for="test">test</label> 
 
<input type="text" id="test" name="test"> 
 
</form>http://stackoverflow.com/questions/ask#

JS скрипку: https://jsfiddle.net/atb2tL53/#&togetherjs=Hr31iDIE0Q

Answer 1

Я установил это, выполнив следующие действия:

1. Удалить border-bottom: solid 2px transparent, потому что это ненужное: вы уже определили, что это 2px и solid, и border-image перезапишет цвет.
2. Комментарий в border-top, border-left и border-right.
3. Переместить в положение после border-image и border-image-slice.

Я считаю, что в Safari border-image материал переписывался border-top.

Смотрите здесь: https://jsfiddle.net/atb2tL53/4/

Вот опрятнее версия: https://jsfiddle.net/atb2tL53/7/

Answer 2

Так, не знаю, как вы получили себя в этом state-- кажется, есть много странствующих правил бегают. Кроме того, // не является допустимым комментарием CSS. В CSS нет комментариев в строке (хотя препроцессоры часто имеют их, например, Sass). Комментарии в css выполняются путем обнуления прокомментированного раздела в /* и */.

На вопрос, я просто поиграл с тем, что у вас есть, чтобы заставить его работать в Safari - не уверен, сколько из того, что у вас было, - это проверка кода, когда он дошел до границы, так что если вы хотите чтобы добавить его обратно, делайте это медленно и осторожно, с учетом политики «последнего правила» CSS.

input[type=text] { 
 
    width: 100%; 
 
    padding: 12px 20px; 
 
    margin: 8px 0; 
 
    box-sizing: border-box; 
 
    border: none; 
 
    border-bottom: 2px solid grey; 
 
    outline: none; 
 
} 
 
input[type=text]:focus { 
 
    width: 100%; 
 
    height: auto; 
 
    border-bottom: solid 2px blue; 
 
}

<form> 
 

 
<label for="test">test</label> 
 
<input type="text" id="test" name="test"> 
 
</form>http://stackoverflow.com/questions/ask#