How would I use css to target the text in a dropdown to change its color, bold it, etc?
Thanks!
The CSS approach I mentioned earlier does work, so I'm not sure what the issue is. You can also try a JavaScript solution:
$(document).ready(function() {
$('#q13 select').css('font-weight','bold');
});
Be sure that #q13 is the selector for your drop-down field.
This what you're looking for?
Here's how I did it
Note: Take out the comments from the CSS section
Good solution. I forgot about nth-child. It just occurred to me that if coloring individual options, remember to update your CSS if you ever change the values in the list or re-sort.
In that case, I'm thinking that if you are pulling values from the database and/or expect the values to move or change often you might have to resort to some magic strings.
I've updated the fiddle to demonstrate this.
Thank you, I actually had already tried that but I was targeting child(1) and it wasnt changing, probably could have experimented a little further!
Thanks for the help!
Any ideas why I cant use font-weight:bold to bold it?
I think you might be able to reference the option by value you set in the right side when making the dropdown. Not 100% sure though. That would be the better option if the order or options change around
Code:
#q13 > option:nth-child(3) {
font-weight: bolder;
}
Form:
Try this selector instead:
#q13 option:nth-child(3) {font-weight:bold;}
The element > element selector looks for immediate children of the first element. This works in Kenneth's code because he's using the ID attribute of the select element itself. The ID attributes shown in the preview on the CSS and JavaScript page are for the field container, which contains the field label and input area. Your code used the selector's field container ID; that's why it didn't work.
When you're using this selector, it's often a good idea to use a more general selector, like #q14 option. The space between the two elements is part of the selector and it means that the rule will find all of the second element within the first one.
Eric,
I changed it to your recommendation and still no bold. Is there a way to just bold every single option in the drop down? I have all of the states so it would be an immense amount of css to get them all...
To make them all bold, try:
#q13 option {font-weight:bold;}
If that doesn't work, try:
#q13 option {font-weight:bold !important;}
Hmm none of those worked. If there isnt any other ways to target it with css is there a way to just bold the selection after a user makes a selection?
The CSS approach I mentioned earlier does work, so I'm not sure what the issue is. You can also try a JavaScript solution:
$(document).ready(function() {
$('#q13 select').css('font-weight','bold');
});
Be sure that #q13 is the selector for your drop-down field.
I'm not sure why either, but the javascript worked instantly. So I guess I'll just go with that instead. Thanks for the help!
You're welcome!
All of the text, or just specific items? Either way, it's possible. Although with forms, you might have to do some jQuery contortions in order to access the elements after they've been rendered.
I threw together a quick fiddle with some examples.