ラジオボタンの背景色を変更する

Question

IEのようにFirefox/Chromeで入力ラジオの背景色を変更することはできますか？ IE（< 9）とFirefox /クローム

http://jsfiddle.net/pAf3U/

の両方で（画像を使用せずに）

実行して、このおかげで

Answer 1

入力ラジオはちょうど円であるので、あなたのスタイルを変更することができます

Here

：<>または、このような< div>タグの210

Answer 2

また、CSSを使用して枠線を変更することもできます。

これは、入力ラジオです：

<input name="myinput" id="myinput" type="radio" value="1" class="highlighted" /> 

そして、これはCSSです：

.highlighted { 
    outline:1px solid #F00; /* Firefox, Opera, Chrome, IE8+ */ 
    *filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1,color=#FF0000); /* IE6, IE7 */ 
} 

Answer 3

短い答えは "ノー" です。

1つのブラウザで動作するものを管理しても、ブラウザはフォームコントロールを非常に異なる方法で処理する傾向があります。つまり、ブラウザ間の互換性を実現することはほとんど不可能です。

失望しています、私は知っています。詳細については、この記事をご覧ください：http://www.456bereastreet.com/archive/200409/styling_form_controls/

ちょうど、どうして背景色を変更したいですか？一般に、ラジオボタンの背景は、コンテナの背景色をピックアップします。

Answer 4

私はこれが私の解決策であるので、あなたがGoogleに質問すれば、これはまだ古い質問です。

ラジオボタンの直後にある<label>要素をスタイルします。

HTML

<input type=radio name="colour" value="green" id="colour-green" /><label for="colour-green" ></label> 
<input type=radio name="colour" value="red" id="colour-red" /><label for="colour-red" ></label> 
<input type=radio name="colour" value="blue" id="colour-blue" /><label for="colour-blue" ></label> 

CSS返信用

input[type=radio]{ 
    display:none; 
} 
input[type=radio] + label{ 
    border: 1px solid black; 
    background-color: red; 
    border-radius: 50%; 
    display: block; 
    ... 
} 
input[type=radio]:checked + label{ 
    background-color: green; 
}