Question

我正在努力使它在聚焦时文本区域的底部边框是彩色的，当它没有被选中时它的灰色，左，右和顶部应该是不可见的，只是空白。所以在Chrome和其他浏览器上这个（查看jsfiddle）有效，但是如果你在safari上运行它，它似乎不知道border-top和border-bottom属性之间的区别。我认为这只是一些愚蠢的事情，我只是看不出它是什么。

＆＃13;

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;

＆＃13;

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

＆＃13;

js小提琴：https://jsfiddle.net/atb2tL53/#&togetherjs=Hr31iDIE0Q

Answer 1

我通过执行以下操作来修复此问题：

删除border-bottom: solid 2px transparent，因为它是不必要的：您已经定义它是2px且是实心的，border-image将覆盖颜色。
回复border-top，border-left和border-right。
在border-image和border-image-slice。

我相信Safari border-image的内容会覆盖border-top。

见这里：https://jsfiddle.net/atb2tL53/4/

这是一个更整洁的版本：https://jsfiddle.net/atb2tL53/7/

Answer 2

所以，不确定你是如何让自己进入这种状态的 - 似乎有很多错误的规则在四处乱窜。此外，//不是有效的CSS评论。 CSS中没有行注释（尽管预处理器经常使用它们，如Sass）。 css中的注释是通过将/*中的注释部分打包开始并*/结束来完成的。

回答问题，我只是摆弄了你在Safari中使用它所做的工作 - 不知道你在那里有多少测试代码来到边境，所以如果你想要添加回来这么做是如此缓慢而谨慎，使用CSS＆＃34;最后一条规则适用＆＃34;政策考虑。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Safari似乎并不知道border-top和border-bottom之间的区别

2 个答案: