Question

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无法解决这个问题？

2ND问题是我有以下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;”焦点变黄了吗？

我无法做到的事情是什么？或者我错了吗？

由于

Answer 1

您需要将input:focus规则置于input[type="number"]规则后面或使用input[type="number"]:focus。

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

Answer 2

问题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 }

Answer 3

问题2：

按属性的CSS选择器，如input[type="number"]和像: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/

CSS表单/输入操作

3 个答案:

问题2：