:focus y :hover

Hello @wordpressivan007

Your question is too general, but of course that’s possible. For example, assuming you want to apply the :focus and :hover styles to the DropDown field in your form, a possible alternative would be entering the following style definition into the “Customize Form Design” attribute in the “Form Settings” tab:

#fbuilder .cff-dropdown-field select:hover{background:red !important; color: white !important;}
#fbuilder .cff-dropdown-field select:focus{background:black !important; color: yellow !important;}

I’ve tested this styles directly from the Developers Console in my browser, look the screenshots below:

Focus:

Hover:

Of course, you should use the CSS rules you want.

Best regards.

Hello Codepeople!

I tried to add it to a specific field but it did not work, the code I used is the following:

#fbuilder .verde select:focus{
border-color:#00ef3f !important; 
border-width:6px !important;
}

regards

Anibal

Hello @wordpressivan007

I’ve checked the source of the web page you sent me as reference (https://www.casasoptimus.com/financiamiento-de-casas/), and there is no field with the class verde assigned.

Best regards.

Hello Codepeople!

I eliminated it because it did not work…

Let’s look at the following page: https://www.casasoptimus.com/como-calcular-la-isoptica/ in the field with name “distancia d1” The change should be seen…

regards

Anibal

Hello @wordpressivan007

The issue is simple, the class: verde is assigned to number fields, and not to dropdown fields, so, the selector in this case would be:

#fbuilder .verde input:focus

and not

#fbuilder .verde select:focus

So, the style definition would be:

#fbuilder .verde input:focus{
border-color:#00ef3f !important; 
border-width:6px !important;
}

Best regards.

Hello Codepeople!

Your plugin is wonderful! We see how valuable it is! You do a great job.

regards

Anibal