Question

我希望在获得焦点时为文本输入添加蓝色阴影高亮显示：

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中看起来不错，但是Chome添加了一些内部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的外观？

Answer 1

首先，您要在2px上添加border :focus，因此，字段移动为border占用元素之外的空间而不是内部，以获取摆脱Chromes灰色边框，你需要使用-webkit-appearance: none;并使用-moz-appearance: none;，它将摆脱chrome中的灰色边框，以及firefox中漂亮的input字段... < / p>

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

Demo

现在，要标准化更多内容，请在border: 2px solid #eee;代码

上添加input

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

Demo 2

注意：您正在使用常规元素选择器，因此所有input 字段会受到影响，请考虑使用class或id。

如何在Chrome中删除输入字段的3D边框

1 个答案: