Question

使用 Bootstap 2

我正在寻找一种方法来覆盖设置了required属性的文本输入上的红色框阴影。蓝色光芒在非必需输入上很好，但红色似乎太极端了。

我找到了蓝色焦点阴影（下方）但我根本找不到伪标签:required。

textarea:focus,
input[type="text"]:focus,  /*  HERE  */
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */

  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

Answer 1

我做了一些额外的研究后找到了答案 CSS选择器堆栈 - 因此，在使用required聚焦时，使用input[type='text']:required:focus{}属性集设置输入的样式。要覆盖红色并使用绿色：

textarea:required:focus,
input[type="text"]:required:focus,  
input[type="password"]:required:focus,
...
.uneditable-input:required:focus {
    border-color: rgba(18, 140, 32, 0.6); /* green */
    outline: 0;
    outline: thin dotted \9;
    /* IE6-9 */

   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(18, 140, 32, 0.6);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(18, 140, 32, 0.6);
           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(18, 140, 32, 0.6);

}

bootstrap input：必需的box-shadow覆盖

1 个答案: