Link to home
Start Free TrialLog in
Avatar of zachvaldez
zachvaldezFlag for United States of America

asked on

change font color or text

Here's my html

        <asp:RadioButtonList ID="RadioButtonList2" runat="server" RepeatDirection="Horizontal">
                        <asp:ListItem Value="Low">Low</asp:ListItem>
                        <asp:ListItem Value="medium">Medium</asp:ListItem>
                        <asp:ListItem Value="high">High</asp:ListItem>
                    </asp:RadioButtonList>

Open in new window


I want to change font color of high to red but I don't see property to change it. Thanks
Avatar of Sean
Sean
Flag of United States of America image

asp:ListItem style="color:red"
You can target the list item by its value using CSS.
Use the id of the radio list container to narrow it down to the items in the actual list.
<html>
<style type="text/css">
#RadioButtonList2 input[value='high'] + label {
    color: red;
}
</style>
<body>
<form runat="server">
 <asp:RadioButtonList ID="RadioButtonList2" runat="server" RepeatDirection="Horizontal">
                        <asp:ListItem Value="Low">Low</asp:ListItem>
                        <asp:ListItem Value="medium">Medium</asp:ListItem>
                        <asp:ListItem Value="high">High</asp:ListItem>
                    </asp:RadioButtonList>
</form>
</body>
</html>

Open in new window

assign a css to your radiobuttonlist

 <asp:RadioButtonList ID="RadioButtonList2" runat="server" RepeatDirection="Horizontal" cssClass="buttonList">

Open in new window


then use css :nth-child()

.buttonList li:nth-child(2) {
  color: red
}

Open in new window


see demo: https://jsfiddle.net/3kxgqhh4/
Avatar of zachvaldez

ASKER

For some reason, I tried both approaches and it won't change to color red for the "high" option???
then post the html rendered for that part :)

I am not sure how .net engine renders radiobutton list :)
I just guessed... if you post html, not aspx, then I can look at it...
I am not sure how .net engine renders radiobutton list :)
As a table

The issue here is how to target the actual ID of the control. This post works, but may be subject to how the authors code is structured.
A better option would be to give the list a class name and then (Example: class set ClassName)
<style type="text/css">
.ClassName input[value='high'] + label {
    color: red;
}
</style>

Open in new window

@Julian

As a table

can you post the rendered HTML for your sample above...
I want to use it in my jsFiddle :)
ignore it, found it somehow

<table id="RadioButtonList2">
  <tr>
    <td>
      <input id="RadioButtonList2_0" type="radio" name="RadioButtonList2" value="Low" />
      <label for="RadioButtonList2_0">Low</label>
    </td>
    <td>
      <input id="RadioButtonList2_1" type="radio" name="RadioButtonList2" value="medium" />
      <label for="RadioButtonList2_1">Medium</label>
    </td>
    <td>
      <input id="RadioButtonList2_2" type="radio" name="RadioButtonList2" value="high" />
      <label for="RadioButtonList2_2">High</label>
    </td>
  </tr>
</table>

Open in new window


so, if we add cssClass="rbPriority", then this is working fine

        <asp:RadioButtonList ID="RadioButtonList2" runat="server" RepeatDirection="Horizontal" CssClass="rbPriority">
            <asp:ListItem Value="Low">Low</asp:ListItem>
            <asp:ListItem Value="medium">Medium</asp:ListItem>
            <asp:ListItem Value="high">High</asp:ListItem>
        </asp:RadioButtonList>

Open in new window

.rbPriority td:nth-child(2) {
  color: red;
}

Open in new window


https://jsfiddle.net/kq5gxw72/
https://jsfiddle.net/npncz57b/
Not sure nth-child is the right call here - in the general case the number of items in the list may change leaving you with a broken style.
Not sure nth-child is the right call here - in the general case the number of items in the list may change leaving you with a broken style.

but this one looks like hardcoded values, not coming from database :) "Low, Medium, High"
but this one looks like hardcoded values, not coming from database :) "Low, Medium, High
Yes but it is advisable to answer questions from the perspective that others reading the thread might not have the same context - a solution that is applicable generically is going to be of more value than one custom made for a given situation - this is good programming practice in any event.
but, what happens if values changes :)
you need to make similar changes to the css files :)
for example "medium" > "normal", "high" -> risky

if we use numbers as long as the number of options are same and in that order, we dont need to change anything :)

especially, if we are working in a multilingual environment :)
I saw an example that you can add CSSclass directly in the ListItem. But that attribute is not available. I wonder how the example did it.
I saw an example that you can add CSSclass directly in the ListItem. But that attribute is not available. I wonder how the example did it.

just like this

        <asp:RadioButtonList ID="RadioButtonList2" runat="server" RepeatDirection="Horizontal" CssClass="rbPriority">
            <asp:ListItem Value="Low">Low</asp:ListItem>
            <asp:ListItem Value="medium">Medium</asp:ListItem>
            <asp:ListItem Value="high">High</asp:ListItem>
            <asp:ListItem class="other" Value="other">Other</asp:ListItem>
        </asp:RadioButtonList>
        <style>
            .rbPriority {
                font-weight: 800;
            }

                .rbPriority td:nth-child(1) {
                    color: gray;
                }

                .rbPriority td:nth-child(2) {
                    color: orange;
                }

                .rbPriority td:nth-child(3) {
                    color: red;
                }
                .rbPriority .other {
                    color: blue;
                }
        </style>

Open in new window


it will be rendered as

<table id="RadioButtonList2" class="rbPriority">
  <tbody>
    <tr>
      <td>
        <input id="RadioButtonList2_0" type="radio" name="RadioButtonList2" value="Low">
          <label for="RadioButtonList2_0">Low</label>
        </td>
      <td>
        <input id="RadioButtonList2_1" type="radio" name="RadioButtonList2" value="medium">
          <label for="RadioButtonList2_1">Medium</label>
        </td>
      <td>
        <input id="RadioButtonList2_2" type="radio" name="RadioButtonList2" value="high">
          <label for="RadioButtonList2_2">High</label>
        </td>
      <td>
        <span class="other">
          <input id="RadioButtonList2_3" type="radio" name="RadioButtonList2" value="other">
            <label for="RadioButtonList2_3">Other</label>
          </span>
      </td>
    </tr>
  </tbody>
</table>

Open in new window


User generated imageand will just work fine, ignore warning :)
The output is beautiful but unfortunately it is not working for me . I use server controls and I think what you have are HTML controls
The output is beautiful but unfortunately it is not working for me . I use server controls and I think what you have are HTML controls

not using html, using asp.net...
code is below and it works fine as is...

<asp:RadioButtonList ID="RadioButtonList2" runat="server" RepeatDirection="Horizontal" CssClass="rbPriority">
            <asp:ListItem Value="Low">Low</asp:ListItem>
            <asp:ListItem Value="medium">Medium</asp:ListItem>
            <asp:ListItem Value="high">High</asp:ListItem>
            <asp:ListItem class="other" Value="other">Other</asp:ListItem>
        </asp:RadioButtonList>
        <style>
            .rbPriority {
                font-weight: 800;
            }

                .rbPriority td:nth-child(1) {
                    color: gray;
                }

                .rbPriority td:nth-child(2) {
                    color: orange;
                }

                .rbPriority td:nth-child(3) {
                    color: red;
                }
                .rbPriority .other {
                    color: blue;
                }
        </style>

Open in new window

just copy paste above code (aspx code + css below) and paste into your page... it will work...
I copied and paste and is not working. Is it maybe because I use IE11 ?
nope...

what is your current code now?

and how it is rendered on browser, just relevant parts, as I did above...
SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Julian-Happy you pitched in! It worked!!! It's the browser issue why it won't render . It's the  same $64 question that drives developers' crazy.
HainKurt did an excellent job  even though it seems like a routine for him and quick response and I appreciate that. I wish I can split the points to be fair.
But really this made my day. Thanks for all the contributions!
IE8: No support for "nth-child()"

https://css-tricks.com/forums/topic/nth-child-in-i-e-7/

try this one :) we can find the solution if it is possible

        <asp:RadioButtonList ID="RadioButtonList2" runat="server" RepeatDirection="Horizontal" CssClass="rbPriority">
            <asp:ListItem Value="Low">Low</asp:ListItem>
            <asp:ListItem Value="medium">Medium</asp:ListItem>
            <asp:ListItem Value="high">High</asp:ListItem>
            <asp:ListItem class="other" Value="other">Other</asp:ListItem>
        </asp:RadioButtonList>
        <style>
            .rbPriority {
                font-weight: 800;
            }

                .rbPriority td:nth-child(1) {
                    color: gray;
                }

                .rbPriority td:nth-child(2) {
                    color: orange;
                }

                .rbPriority td:nth-child(3) {
                    color: red;
                }

                .rbPriority td:first-child {
                    color: gray;
                }

                .rbPriority td:first-child + td {
                    color: orange;
                }

                .rbPriority td:first-child + td + td {
                    color: red;
                }
                .rbPriority .other {
                    color: blue;
                }
        </style>

Open in new window


".rbPriority td:nth-child(3)" can be expressed as ".rbPriority td:first-child + td + td" which works in IE8 as well...
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
"class" attribute is not recognize...
you mean class in span? on browser? or class in aspx
I said before, ignore it! it will be added to html as is and browser will show it correctly...

User generated imageit is just a warning, not error that stop you...
Okay,  that's good to know
the class attribute in "other" Listitem I meant
it cannot validate (cannot find it in its properties) but renders as is, which we are trying to do...
then just simple "css/class" it shows perfectly fine in all browsers...
HainKurt,
  here's my structure...

               
   
                     <div class="row">
                          <div class="small-3 columns radiopadding left">
                                         <label>Priority
                        <asp:RadioButtonList ID="RadioButtonList2" runat="server" RepeatDirection="Horizontal" CssClass="xxxx">
                            <asp:ListItem Value="low">Low</asp:ListItem>
                            <asp:ListItem Value="medium">Medium</asp:ListItem>
                            <asp:ListItem Value="high">High</asp:ListItem>
                        </asp:RadioButtonList></label>
             
                    </div>
</div>

Open in new window


The reason I showed you this is because you have introduce <TR> and <TD>(table elements) which I have to make some changes in layout.-just fyi
why did you use class="xxxx" here?

The reason I showed you this is because you have introduce <TR> and <TD>(table elements) which I have to make some changes in layout.

you dont need to do any code change! it is rendered as html...

all samples here, used CssClass="rbPriority" and css ıs based on this class, not xxxx!!!

<asp:RadioButtonList ID="RadioButtonList2" runat="server" RepeatDirection="Horizontal" CssClass="rbPriority">

Open in new window

Appreciate your great help!!