-
USODFWAsked on February 22, 2018 at 5:17 PM
How can I change the options text color for single choice field? For example, I want the field label black as normal default, but the options text in red.
How can I do that?
thanks, Bob
-
Kevin Support Team LeadReplied on February 22, 2018 at 7:51 PM
It's possible to change the text color on the options of a single choice element with some CSS code, here are the codes that will help you doing so:
- If you need to change the options color for all the single choice fields on your form:
[data-type="control_radio"] .form-radio-item label{
color: red;
}
- If you need to change the color only for one of the single choice fields specifically, then you will need to do the following:
1. Find the field id and copy the number shown there. This guide will help you finding that and below is an example about it: https://www.jotform.com/help/146-How-to-Find-Field-IDs-and-Names
Replace the number right after the underscore on the code below with the number you copied from your field:
#id_3 .form-radio-item label{
color: red;
}
This guide will help you injecting the code to your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
I hope this helps.
-
USODFWReplied on February 23, 2018 at 10:43 AMKevin, this worked perfectly. thanks, bob
... -
USODFWReplied on February 23, 2018 at 11:43 AMI was able to successfully use your first code to change all options in the
field to Red. The second code works, but only for all options in one
specific field. What I'd like to do is change the 1st option of each of
these single choice fields to Red.
I have several id's which are numbered in order from #input_27_0 and
continue thru #input_41_0. I'm guessing the _0 is the 1st option of
each field id. What is the code to change just the 1st option line.
thanks, bob
... -
SabbirReplied on February 23, 2018 at 12:23 PM
You can use the following CSS code snippet to change the color of the 1st radio option line:
#label_input_27_0, #label_input_28_0, #label_input_29_0, #label_input_30_0, #label_input_31_0,
#label_input_32_0, #label_input_33_0, #label_input_34_0, #label_input_35_0, #label_input_36_0,
#label_input_37_0, #label_input_38_0, #label_input_39_0, #label_input_40_0, #label_input_41_0{
color: red;
}This guide will help you injecting the code to your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
If you have any further query, please let us know.
-
USODFWReplied on February 23, 2018 at 1:43 PMAwesome, works perfectly. Thank you so much, bob
...