zachvaldez
asked on
change font color or text
Here's my html
I want to change font color of high to red but I don't see property to change it. Thanks
<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>
I want to change font color of high to red but I don't see property to change it. Thanks
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.
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>
assign a css to your radiobuttonlist
then use css :nth-child()
see demo: https://jsfiddle.net/3kxgqhh4/
<asp:RadioButtonList ID="RadioButtonList2" runat="server" RepeatDirection="Horizontal" cssClass="buttonList">
then use css :nth-child()
.buttonList li:nth-child(2) {
color: red
}
see demo: https://jsfiddle.net/3kxgqhh4/
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 :)
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>
@Julian
can you post the rendered HTML for your sample above...
I want to use it in my jsFiddle :)
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
so, if we add cssClass="rbPriority", then this is working fine
https://jsfiddle.net/kq5gxw72/
https://jsfiddle.net/npncz57b/
<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>
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>
.rbPriority td:nth-child(2) {
color: red;
}
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, HighYes 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 :)
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 :)
ASKER
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>
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>
and will just work fine, ignore warning :)
ASKER
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>
just copy paste above code (aspx code + css below) and paste into your page... it will work...
ASKER
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...
what is your current code now?
and how it is rendered on browser, just relevant parts, as I did above...
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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!
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
".rbPriority td:nth-child(3)" can be expressed as ".rbPriority td:first-child + td + td" which works in IE8 as well...
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>
".rbPriority td:nth-child(3)" can be expressed as ".rbPriority td:first-child + td + td" which works in IE8 as well...
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
"class" attribute is not recognize...
ASKER
Okay, that's good to know
the class attribute in "other" Listitem I meant
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...
then just simple "css/class" it shows perfectly fine in all browsers...
ASKER
HainKurt,
here's my structure...
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
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>
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?
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!!!
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">
ASKER
Appreciate your great help!!