2009-06-16 14 views
34

CSSでラジオボタンをどのように選択しますか?私が作業しているHTMLは生成されるので、クラスやその他の属性を追加することはできません。どのようにCSSのラジオボタンを選択しますか?

私はinput [type = "radio"]がインターネット上に見つかりましたが、これが通常のCSSであり、ほとんどのブラウザでサポートされているかどうかはわかりません。

ラジオボタンを選択する他の方法はありますか?

は、ありがとう

ブレット

答えて

60

input[type="radio"]attribute selectorの一例です。これはCSS3仕様の一部であり、完全に合法です。それらをサポートしていない唯一のブラウザはIE6です。 IE6をサポートすることがプロジェクトにとって重要なのであれば、問題のラジオボタンにクラスを追加する必要があります。

Here's an article属性セレクタを効果的に使用する方法の例を示します。 CSS3グッズの詳細については、this articleをご覧ください。

+0

最初のURL(リンク)も参考にしてください。 – Brettski

+0

それは私が間違ったリンクをコピーするでしょう。ヘッドアップありがとうございました。 –

+3

これはCSS3の特典ではありません。実際にはCSS2の一部です。だからIE6は、そのサポートの欠如の理由がありません。 –

8

属性セレクタ(入力[タイプ=「ラジオ」])が広くIE6 :)

あなたは(クラス名のサポートを注入するためにHTMLを修正する能力を持っていない場合、またはアクセス以外のすべてでサポートされている正解であり、これを達成するためにJavaScriptに)あなたのオプションは:

A)です。あなたのサイトがこれに依存しないことを確認し、IE6が正常に機能するようにします。

B)。それなしで生きてください

0

あなたのソリューションは正しいものであり、IE6以外の最新のブラウザーすべてで動作します。 IE6の場合は、それらを選択する方法、HTMLを変更する方法、またはJavaScriptを使用する方法のいずれかを見つけなければなりません。

1

上記の1つは、CSSでターゲティングする正しい方法です。これはattribute selectorと呼ばれています。 IE6以降ではサポートされていません。それらは、IE6の条件付き動作スクリプトを追加することによってシミュレートすることができます。 (Googleで検索すると、ファイルの終了は通常.htcです)。

通常、.htcファイルは恐ろしいパフォーマンスを招き、パフォーマンスの低下が許容されることを保証するために、慎重に使用して十分にテストしてください。

+0

egad、.htcブードー! altソリューションでも良い考えがある。 – annakata

4

jQueryを使用して入力を選択し、クラスを動的に追加することができます。

例(ソース:http://docs.jquery.com/Attributes/addClass#class):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 

    <script> 
    $(document).ready(function(){ 
    $("p:last").addClass("selected highlight"); 
    }); 
    </script> 
    <style> 
    p { margin: 8px; font-size:16px; } 
    .selected { color:red; } 
    .highlight { background:yellow; } 
    </style> 
</head> 
<body> 
    <p>Hello</p> 
    <p>and</p> 
    <p>Goodbye</p> 
</body> 
</html> 

[編集]

のjQueryの代わりに、それはすなわち、バージョンに関する問題の負荷を修正 http://code.google.com/p/ie7-js/

を使用することでより低い7 あなたに最も関心のある修正がここに例示されています:

http://ie7-js.googlecode.com/svn/test/attr-value.html

+0

ああちょうどそのように:) – Tom

+0

ええ、私はその考えが好きですが、私はこのプロジェクトでIE 5.5をサポートする必要があります:( – Brettski

0

jQueryを使用して、ページのすべてのラジオボタンを見つけて、いくつかのCSSクラスを追加することができます。

関連する問題