0 
input:required{
    background-color:#f00;
}

input:required label{
   color: #FF3434;
}

我的表单目前有上面的 CSS 代码，

我希望能够在需要该字段时将标签设为红色。我的输入字段是：

<label for="frmComTelephone">Telephone</label>  
<input type="number" name="Telephone" id="frmComTelephone"/>

<label for="frmIn1IncinTime">Time</label>   
<input type="text" name="Incident Time" id="frmIn1IncinTime" required="required"/><br>

但是那个 CSS 不起作用我该如何解决这个问题？

第二个问题是我有以下 CSS：

input:focus 
{ 
    background-color:yellow;
}

input[type="text"], input[type="date"],input[type="time"],input[type="number"],textarea,select
{
border-radius:5px;
border-width: 1px;
border-style: solid;
border-color: #C6C6C6; 
height:41px;
background-color: #FF3434;
width: 100%;

}

但是当项目被聚焦时它不会变成黄色，如果我删除“背景颜色：#FF3434;” 对焦变黄了？

我正在做的事不能做吗？还是我要解决这个问题？

谢谢

4

3 回答 3

1

您需要将规则放在input:focus规则后面input[type="number"]或使用input[type="number"]:focus.

否则它会被覆盖，input[type="number"]因为它更具体。

于 2012-07-11T15:09:19.677 回答
1

问题一：

input:required label{
   color: #FF3434;
}

这行不通，因为label不是 的孩子input。他们是兄弟姐妹。要解决这个问题，您必须创建一个类并将其附加到您的标签上：

label.required { color: #FF3434; }
<label for="frmComTelephone" class="required">Telephone</label>

问题 2：

试试这个：

input:focus,
textarea:focus,
select:focus
{ background-color: yellow !important; }

...

更新

如果你不使用更舒服，!important那么试试这个：

input[type="text"]:focus, 
input[type="date"]:focus,
input[type="time"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus
{ background-color: yellow }

或者

如果您id的表格上有一个，这也可以

#formID input:focus,
#formID textarea:focus,
#formID select:focus
{ background-color: yellow }
于 2012-07-11T15:13:26.277 回答
1

问题2：

按属性、likeinput[type="number"]和伪元素 like 的CSS 选择器:focus具有相同的特异性。这意味着您的input:focus规则会被以下input[type="number"]背景覆盖。

有两种方法可以解决此问题：

第一个选择器中更高的特异性： 
form input:focus 
{ 
    background-color:yellow;
}

input[type="text"]
{
    background-color: #FF3434;
}
更好：正确的规则顺序，更重要的是其次 
input[type="text"]
{
    background-color: #FF3434;
}

form input:focus 
{ 
    background-color:yellow;
}

CSS 的特殊性似乎很难，但正确理解它是值得的。有很多关于它的资源，试试这个介绍：http ://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

于 2012-07-11T15:27:25.057 回答