スタイル個別のRadioButtonList ListItem

Question

RadioButtonListのCssClassを使用して、生成されたtableにクラスを割り当てることができますが、生成された<td>を個別にスタイルする必要があります。

JQueryで簡単ですが、それに頼る必要はありません。

次壊れたHTMLでListItem結果

<table id="myTable"> 
    <tbody> 
     <tr> 
      <td> 
       <span cssclass="some_class"> // Well this is rubbish! 
        <input id="myRadioInput" type="radio" name="myRadioInput" value="myValue" > 
        <label for="myRadioInput">myLabel</label> 
       </span> 
      </td> 
      <td> 
       <input id="myRadioInput2" type="radio" name="myRadioInput2" value="myValue2"> 
       <label for="myRadioInput2">myLabel2</label> 
      </td> 
     </tr> 
    </tbody> 
</table> 

にcssClass="myClass"を追加するので、私の質問は：それはクラスを割り当てるか、生成された<td>の個別にインラインスタイルを適用するのいずれかに実際にかのうですか？

ご注意ください これはASP.NETに関する質問です。 HTML要素をスタイルする方法を教えてくれるだけでは、この質問に答えられません。 （あなたは、各TDごとに異なるスタイルを望んでいた場合）、すべてのTDのあなたがそれ以外はそう...

#myTable td{ 
     color:Red; 
    } 

のようにCSSを追加することができますスタイルに

Answer 1

jQueryのものにクラスを追加する唯一の方法だろう生成されたtd。

$('#myTable td:eq(0)').addClass('td1'); 
$('#myTable td:eq(1)').addClass('td2'); 
... 

OR

$.each($('#myTable td'), function(i){ 
    $(this).addClass('td'+i); 
}); 

これは、私はあなたがプロパティパネルからの制御することはできませんすべての余分なマークアップとASP.NETコントロールを嫌う理由の一つです。

Answer 2

次のようにあなたはそれを行うことができます。

<table> 
    <tr> 
    <td class="yourcssclassname"></td> 
    <td class="yourcssclassname2></td> 
    </tr> 
</table> 

<style type="text/css"> 
    .yourcssclassname 
    { 
    padding: 10px; 
    } 
    .yourcssclassname2 
    { 
    padding: 15px; 
    } 
</style> 

またはあなたをすることができます

<table> 
    <tr> 
    <td style="padding:10px;"></td> 
    <td style="padding:15px;"></td> 
    </tr> 
</table> 

・ホープこれはあなたがして入力要素とラベルをターゲットにすることができ

Answer 3

を支援します。

input[type="radio"] { margin-right:10px; } 
input[type="radio"] + label { color:red; } 

を

テーブルに腰掛けて、それをもっと明示的に加えることができます。 IE7と下位互換性がある必要があります。

Answer 4

あなたはソリューションに非常に近いです。個々のスタイリングの項目にcssclassではなくclass属性を追加します。これにより、spanタグが追加され、inputおよびlabelタグが適切なクラスに引き渡されます。

<style> 
    .radiobuttonlist .red  { display: block; background-color: red; } 
</style>  

<asp:RadioButtonList runat="server" CssClass="radiobuttonlist"> 
    <asp:ListItem Text="Item1" Value="1" ></asp:ListItem> 
    <asp:ListItem Text="Item2" Value="2" class="red" ></asp:ListItem> 
    <asp:ListItem Text="Item3" Value="3" ></asp:ListItem> 
</asp:RadioButtonList> 

Answer 5

あなたはコードでそれを行うにしたい場合（例えば、あなたが動的に複雑なロジックに基づいてスタイルを調整する必要がある場合）は、同様に動作しますが、場合かもしれないclass属性を設定する（ListItemの上style属性を設定することができますあなたのListItem）はasp.netは特別aspNetDisabledクラスでそれを上書きします、無効になっています：

item.Attributes["style"] = "color: lightgray; font-style: italic;";