logo标签列表

如何在Chrome中去除输入框的3D边框

csshtmlgoogle-chromefirefoxinput
8

当文本输入框获得焦点时，我想添加蓝色阴影高亮：

input:focus {
    box-shadow:0px 0px 5px #6192D1;
    -webkit-box-shadow: 0px 0px 5px  #6192D1;
    -moz-box-shadow: 0px 0px 5px  #6192D1;       
    outline: 0;
}

在Firefox中看起来很好，但是Chrome添加了一些内部3D边框。

JSFiddle

Chrome添加了以下样式：

border-top-style: inset;
border-top-width: 2px;
border-bottom-style: inset;
border-bottom-width: 2px;
border-left-style: inset;
border-left-width: 2px;
border-right-style: inset;
border-right-width: 2px;

如果我设置了以下内容：

border-width: 2px;
border-color: transparent;
border-style: inset;

在Chrome中边框消失了，但在FF中会使字段在聚焦时调整大小。

JSFiddle

有什么想法可以摆脱3D边框而不影响FF的外观？

你在 HTML 页面的第一行添加了 <!DOCTYPE html> 吗？ - Sid M
1个回答
16

首先，您正在添加:focus上的2px边框，因此，在元素外部占用空间的border导致字段移动，而不是在内部。为了摆脱Chrome的灰色边框，您需要使用-webkit-appearance: none;并且还要使用-moz-appearance: none;，这将消除Chrome中的灰色边框，并在Firefox中显示漂亮的input字段...

input {
    padding: 4px;
    -webkit-appearance: none; 
    -moz-appearance: none; 
}

演示

现在，为了更加标准化，将 input 标签添加 border: 2px solid #eee;

input {
    padding: 4px;
    -webkit-appearance: none; 
    -moz-appearance: none; 
    border: 2px solid #eee; /* Here */
}

演示2

注意：您正在使用通用元素选择器，因此所有的字段都将受到影响，请考虑改用class或id。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接