How to style options differently in field output

[Alejandro]

If you have a select, radio or checkbox field. You can use the output format of the field and CSS to change the style of each option.

Change the output format of the field to:

<span class="{optionvalue}">{fieldtext}</span>

This will add the field option value to the output of the field. If you have field option values "one", "two", "three". Now you can use this CSS to change the style:
 

.one {}

.two {}

.three {}

If your field name is  jr_choices then you can include the field name as a parent CSS selector to limit the style changes only to these options:
 

.jrChoices .one {}

.jrChoices .two {}

.jrChoices .three {}

And of course, you could also change the output format above to include a prefix to make the CSS selector more unique. Like this:

<span class="choice-{optionvalue}">{fieldtext}</span>

.choice-one {}

.choice-two {}

.choice-three {}

Choose whatever you like best!

[n00bster]

This section is only visible with a valid subscription. If you have a valid subscription, please login.