Css 输入：焦点不工作

我试着谷歌风格的输入框。但我在输入时结巴了：专注。 代码如下

如有任何见解，将不胜感激

你有问题，这意味着什么？这意味着您有一些规则样式胜过您的“input[type=“text”]选择器，如果您真的需要您的选择器获胜，您需要指定此样式比其他带有关键字的样式更重要！要点“在每种风格的结尾，尝试一下：

input[type="text"]:focus {
    border:1px solid #4D90FE !important;
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset !important;
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset !important;
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset !important;
    outline: none !important;
}

这不是css规范中的一个漏洞，但是如果你像这样离开这个样式，有一天你会后悔的，因为你没有一个很好的特殊性，你尝试应用到这个元素的任何规则，例如，这个规则将战胜一个带有元素id的规则，例如“#my#u input_type_text”或class selector”。my input text“

使用

input#gText:focus

而不是

input[type=“text”]：focus

并添加

大纲：无

输入#gText:focus{

边框：1px实心#4D90FE；

-webkit盒阴影：0 1px 2px rgba（0,0,0,0.3）插图；

-moz盒阴影：0 1px 2px rgba（0,0,0,0.3）插图；

方框阴影：0 1px 2px rgba（0,0,0,0.3）插图；

大纲：无；

}

演示：

你的小提琴对我有用。。。确保您在正确的浏览器中进行测试。当焦点集中在输入时，是否会显示蓝线边框
input[type="text"]:focus {
    border:1px solid #4D90FE !important;
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset !important;
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset !important;
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset !important;
    outline: none !important;
}