7

我试图谷歌风格的输入框。但我坚持输入：焦点。代码如下 http://jsfiddle.net/GmgUZ/

  input:hover{
    border-bottom-color: #B9B9B9;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #B9B9B9;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 1px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #B9B9B9;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 1px;
    border-top-color: #A0A0A0;
    border-top-style: solid;
    border-top-width: 1px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
    }

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

    }

任何见解将不胜感激！

4

2 回答 2

13

使用input#gText:focus 代替input[type="text"]:focus并添加outline: none;

输入#gText:focus {
边框:1px 实心#4D90FE;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) 插图；
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) 插图；
box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset;
大纲：无；
}

演示：http:
//jsfiddle.net/GmgUZ/1/

于 2012-06-17T08:11:09.837 回答
1

你有一个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 规范中的 hack，但是如果你像那样离开这种风格，你有一天会后悔，因为你没有很好的特异性，以及你试图应用于这个元素的任何规则，例如这个规则将赢得具有元素 id 的规则，例如“#my_input_type_text”或类选择器“.my-input-text”

于 2012-06-16T19:51:26.590 回答