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

【问题标题】：How to remove 3D border of input filed in Chrome如何在 Chrome 中删除输入字段的 3D 边框
【发布时间】：2014-01-29 09:37:42
【问题描述】：

我想在文本输入获得焦点时添加蓝色阴影突出显示：

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 中的外观？

【问题讨论】：

您是否在 html 页面的第一行添加了 <!DOCTYPE html>？

标签： css html google-chrome firefox input

【解决方案1】：

首先，您在:focus 上添加2px border，因此，当border 在元素外部而不是内部占据空间时，字段移动，以摆脱Chromes 灰色边框，您需要使用-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

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

【讨论】：