Question

我试着谷歌风格输入框。但我坚持输入：焦点。代码如下 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;

    }

非常感谢任何见解！

Answer 1

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

  输入#gText：focus {
  边框：1px solid＃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/

Answer 2

您遇到CSS Specificity问题，这意味着什么？这意味着你有一些规则样式胜过你的“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;
}

这不是hass在css规范中，但是如果你离开这种风格，你会后悔有一天，因为你没有很好的特异性，以及你试图应用于这个元素的任何规则例如，此规则将赢得具有元素id的规则，例如“#my_input_type_text”或类选择器“.my-input-text”

输入：焦点不起作用

2 个答案: