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%;
}
但是当项目被聚焦时,如果我移除“background-color:#ff3434;”,它不会变成黄色。焦点变黄了?
我做不到的事吗?还是我做错了?
谢谢
问题1:
input:required label{
color: #FF3434;
}
这将不起作用,因为标签
不是输入
的子项。他们是兄弟姐妹。要解决这个问题,您必须创建一个类并将其附加到您的标签:
label.required { color: #FF3434; }
<label for="frmComTelephone" class="required">Telephone</label>
问题2:
试试看:
input:focus,
textarea:focus,
select:focus
{ background-color: yellow !important; }
...
更新
如果不使用!importity
会更舒服,请尝试以下操作:
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 }