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

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 borderon :focus,所以因此,字段移动为border占据元素之外的空间而不是内部,以摆脱Chromes灰色边框,你需要使用-webkit-appearance: none;并使用-moz-appearance: none;哪个将摆脱灰色边框chrome,input在firefox中看起来很漂亮......

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

演示

现在,为了更规范,增加border: 2px solid #eee;对input标签

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

演示2

注意:您正在使用常规元素选择器,因此所有input 字段都将受到影响,请考虑使用class或id替代.