-
mgcaledonian13Asked on February 5, 2016 at 5:54 AM
How do you change only one sublabel color
Have tried
.sublabel_53 {color: red;!important;} seems the most likely
#sublabel_53 {color: red;!important;} I would think totally wrong
These do not work
ID etc. #input_53 Name {repeatThe}
Willy Scott
-
mert JotForm UI DeveloperReplied on February 5, 2016 at 8:55 AM
Hi Willy,
You can easily find the id of the desired item by using the browser's "Inspect mode" with pressing F12 key. Please, see the steps from the below:
Also, you can see the results from the below:
For further assistance, please do let us know.
Thanks.
-
mgcaledonian13Replied on February 5, 2016 at 5:41 PM
I am sorry but I was not asking how to find the ID, I was asking basically what the syntax was to inject into the CSS in Form Styles.
Can you give me this bit of info please?
Willy Scott
-
Kevin Support Team LeadReplied on February 5, 2016 at 7:30 PM
This is the CSS code:
#sublabel_53 {
color: red !important;
}
You will use "#" instead of "." because you will use the ID of the element.
This guide will help you to inject the CSS in your form: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.
-
mgcaledonian13Replied on February 6, 2016 at 1:50 AM
Kevin_G
Sorry to say that does not work either.
Please see https://form.jotform.com/60324494472961
The above is a small Test Form "Title me"
I have injected your CSS into the Form Styles as instructed, there must be something missing.
Willy Scott
-
Elton Support Team LeadReplied on February 6, 2016 at 2:54 AM
There's no specific ID on some of the sub-labels. However, you can use its parent element IDs.
You can use the following, any of the two will work.
#id_11 .form-sub-label {
color: red;
}
OR
label[for="input_11"].form-sub-label{
color: red;
}
So basically, you only have to replace the number ID e.g. 11 which you can find on the field properties (right click the field > edit properties) under ID.
If you need further assistance, let us know.
Thanks!
-
mgcaledonian13Replied on February 6, 2016 at 8:02 AM
EltonCris
Thanks for that CSS, works a treat.
Why do I have to use the following to get the First and Last to do the same thing
label[for="first_10"].form-sub-label{color: red;}
label[for="last_10"].form-sub-label{color: blue;}
Made these different colors just to see that the two CSS work Independently
Can this be combined into one line of CSS
Tried this, but it does not work. It seemed logical but clearly that is not the answer.
label[for="first_10,last_10"].form-sub-label{color: red;}
I am determined to master this "black art" !!!!
See https://form.jotform.com/60324494472961
Willy Scott
-
KadeJMReplied on February 6, 2016 at 5:38 PM
The reason it's not working together is because those are 2 separate elements that are targeting the Labels for each and unfortunately they cannot be combined.
-
mgcaledonian13Replied on February 6, 2016 at 6:01 PM
KadeJM
OK I can live with that no problem.
Thanks to you and all the others involved in resolving my Sub Label CSS, it is very much appreciated.
Willy Scott
-
Kevin Support Team LeadReplied on February 6, 2016 at 10:20 PM
On behalf of all our colleagues, you're welcome Willy.
Great to know your form looks like you want.
If you need further assistance, do not hesitate to contact us, we will be glad to help you.