html - CSS 表单/输入操作

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

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