css - 如何在 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

关于如何在不影响 FF 外观的情况下去除 3d 边框的任何想法？

Answer 1

首先，您要在 :focus 上添加一个 2px border，因此，该字段将移动为 border 在元素外部而不是内部占用空间，要摆脱 Chrome 的灰色边框，您需要使用 -webkit-appearance: none; 并使用 -moz-appearance: none ; 这将摆脱 chrome 中的灰色边框，以及 firefox 中漂亮的 input 字段...

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

Demo

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

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

Demo 2

---

Note: You are using general element selectors, so all the input fields will be affected, consider using a class or an id instead.