我想在接收到焦点时为文本输入添加蓝色阴影高亮:
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 外观边框。
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 中它使字段在焦点上调整大小。
关于如何在不影响 FF 外观的情况下去除 3d 边框的任何想法?
最佳答案
首先,您要在 :focus
上添加一个 2px
border
,因此,该字段将移动为 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 */
}
Note: You are using general element selectors, so all the
input
fields will be affected, consider using aclass
or anid
instead.
关于css - 如何在 Chrome 中删除输入字段的 3D 边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21043893/