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 が機能していません。これを解決するにはどうすればよいですか?

2番目の問題は、次の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

問題 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:

属性による CSS セレクターinput[type="number"]と疑似要素のようなもの:focusは、同じ特異性を持ちます。これは、input:focusルールが次のinput[type="number"]背景によってオーバーライドされることを意味します。

これを修正するには、次の 2 つの方法があります。

最初のセレクターのより高い特異性: 
form input:focus 
{ 
    background-color:yellow;
}

input[type="text"]
{
    background-color: #FF3434;
}
より良い: ルールの順序を正しくし、より重要なものを 2 番目に優先させる 
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 に答える