web-dev-qa-db-ja.com

CheckBoxListのリストアイテムへのスタイルの適用

CheckBoxList ListItemsにスタイルを適用する方法。 <ItemStyle>を指定できるRepeaterなどの他のコントロールとは異なり、個々のコントロールごとにスタイルを指定することはできません。

何らかの回避策はありますか？

asp.nethtmlcontrolscoding-style
24
Andrew Burgess

次のように、プログラムによってListItemに属性を追加できます。

CheckBoxListがあり、ListItemsを追加するとします。途中で属性を追加できます。

ListItem li = new ListItem("Richard Byrd", "11");
li.Selected = false;
li.Attributes.Add("Style", "color: red;");
CheckBoxList1.Items.Add(li);

これにより、listitemテキストの色が赤になります。実験して楽しんでください。

25
Cyberherbalist

これを行う最善の方法は、新しいCssClassを作成することです。 ASP.NETは、CheckBoxListをテーブル構造に変換します。

のようなものを使用して

Style.css

.chkboxlist td 
{
    font-size:x-large;
}

Page.aspx

<asp:CheckBoxList ID="chkboxlist1" runat="server" CssClass="chkboxlist" />

トリックを行います

13
Andrew Burgess

アンドリューの答えに加えて...

CheckBoxListまたはRadioButtonListに設定した他の属性に応じて、ASP.Netは異なる構造を使用して出力をレンダリングします。たとえば、RepeatLayout="Flow"、それはTABLEとしてレンダリングされないので、CSSファイルで使用する子孫セレクターに注意する必要があります。

ほとんどの場合、レンダリングされたページで、おそらくいくつかの異なるブラウザで「ソースの表示」を実行し、どのASPを把握することができます.Netはやっています。ただし、サーバーコントロールの新しいバージョンやブラウザーによってレンダリングが異なるという危険があります。

コードビハインドに属性を追加せずに、特定のリストアイテムまたはリストアイテムのセットに異なるスタイルを設定する場合は、CSS属性セレクターを使用できます。その唯一の欠点は、IE6ではサポートされていないことです。 jQuery はCSS 3スタイルの属性セレクターを完全にサポートしているので、おそらくより広いブラウザーのサポートにも使用できます。

6
CMPalmer

マークアップでもこれを実現できます。

<asp:ListItem Text="Good" Value="True" style="background-color:green;color:white" />
<br />
<asp:ListItem Text="Bad" Value="False" style="background-color:red;color:white" />

属性 'style'は要素 'ListItem'の有効な属性ではありません。という警告でWordスタイルに下線が引かれますが、アイテムは必要に応じてフォーマットされます。

5
Jon White

Wordごとに異なるフォントスタイルと色を使用することもできます。

<asp:ListItem Text="Other (<span style=font-weight:bold;>please </span><span>style=color:Red;font-weight:bold;>specify</span>):" Value="10"></asp:ListItem>
2
SubhoM
public bool Repeater_Bind()
{
    RadioButtonList objRadioButton = (RadioButtonList)eventArgs.Item.FindControl("rbList");
    if (curQuestionInfo.CorrectAnswer != -1) {
        objRadioButton.Items[curQuestionInfo.CorrectAnswer].Attributes.Add("Style", "color: #b4fbb1;");
    }
}
1
John