A simple method to automatically color background of required fields

Hi,

Is there a way to have required input fields backgrounds, have a pale color using something along the lines like this bit of CSS, work?

.form-required-input
{ 
color : black !important;
font-size : 0.8em;
font-weight : bold;
background-color : #DFDFFF;
}

best,
Robert

You need to use the ".form-validation-error" class, so the code should be this one: 

.form-validation-error {

    color : black !important;

font-size : 0.8em;

font-weight : bold;

background-color : #DFDFFF;

}

You can also change this from the advanced designer, here is how: 

I hope this helps. 

Hi,

It never occured that I could do this with advanced designer. I have used it in the past to customize the the error.

Thank you, I will try this.

best,
Robert

Hi,

Not exactly what I was looking for, this only changes in the event a field is missed. I want the required fields to always have this background color. Something like you see on a PDF form required field. It also has a red border, this won't work on a red form.

best,
Robert

Thanks for the additional details. 

If that's the case, then you may only do it with CSS code, now, instead of using the class "form-validation-error" you will need to use "jf-required", example: 

.jf-required{

    color : black !important;

   font-size : 0.8em;

   font-weight : bold;

  background-color : #DFDFFF;

}

I hope this helps. 

Hi,

Well, closer but still not exactly what I'm asking for. This what I got.

This is what I'm looking for.

best,
Robert

Please inject the following custom css code in your form and that should solve your problem:

input[required] {

    background-color: #DFDFFF !important;

}

The following guide should help you  how to inject custom css code in form:   https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

Hope this helps.

Do get back to us if you need any other changes.

PERFECT, Thanks very much to all.

~ later ~

OOPs, spoke to soon, dropdowns not working so I added this tidbit and all is good.

input[required], .form-dropdown[required] {

Now for date fields, I tried these and they didn't work,

.form-widget[required], .widget-required[required]  and

.datepicker[required], .hasDatepicker[required]  and finally this

.input#datepicker[required]

best,
Robert

I had to add this bit also for required textboxes;

.form-textarea[required]

best,
Robert

The [required] attribute can be only be used with the HTML tags i.e., input. Since all the classes added comes within the tag, it is not required to add them separately. So, the code provided our colleague @ashwin should be working fine. Could you try adding it to the form and let us know if you are referring to any specific field that is not working?

We will be happy to take a look again. 

Hi,

The only issue now is required date fields. If I use consul and edit css, I can get what I want, but as you know that is only for testing. If I use the element class codes that show using consul, in my injected css it won't work.

Also if I embed the code I can make it work.

So, the code provided our colleague @ashwin should be working fine ...It worked to a point but not for all fields as I indicated. I had to add two more statements::
form-dropdown[required],.form-textarea[required]... to get those particular fields to work
Clone the form and you will see what I am referring to,: 83354135430955

So as I say just the required input date fields background is not working right now, and only that.

Thank you,
Robert

I see that the default Date field is displayed only on the top of the form which is not required field. Are you referring to the Trial dates used with 'Mini Date Picker' widgets? If so, the CSS code has to be injected with the widget wizard in the Custom CSS section.

Let us know if you are referring to the same widget or a different field with exact field label so that we can check it further. 

Hi,

Yes that is it, the Mini Date Picker widget. I presumed I could do it for them all at once.

I have injected the code there and it works.

Thank you,
Robert