Title: :focus y :hover
Last modified: March 9, 2019

---

# :focus y :hover

 *  Resolved [wordpressivan007](https://wordpress.org/support/users/wordpressivan007/)
 * (@wordpressivan007)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/focus-y-hover/)
 * Hello Codepeople!
 * Is it possible to use the properties :focus and :hover in the plugin?
 * I have tried to use it and I have not succeeded, I use SELECT and neither…
 * regards
 * Anibal
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ffocus-y-hover%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/focus-y-hover/#post-11293827)
 * Hello [@wordpressivan007](https://wordpress.org/support/users/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:
 * ![](https://i0.wp.com/wordpress.dwbooster.com/customdownloads/2019/03/09/screenshot_focus.
   png?ssl=1)
 * Hover:
 * ![](https://i0.wp.com/wordpress.dwbooster.com/customdownloads/2019/03/09/screenshot_hover.
   png?ssl=1)
 * Of course, you should use the CSS rules you want.
 * Best regards.
 *  Thread Starter [wordpressivan007](https://wordpress.org/support/users/wordpressivan007/)
 * (@wordpressivan007)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/focus-y-hover/#post-11294283)
 * 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
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/focus-y-hover/#post-11294544)
 * Hello [@wordpressivan007](https://wordpress.org/support/users/wordpressivan007/)
 * I’ve checked the source of the web page you sent me as reference ([https://www.casasoptimus.com/financiamiento-de-casas/](https://www.casasoptimus.com/financiamiento-de-casas/)),
   and there is no field with the class verde assigned.
 * Best regards.
 *  Thread Starter [wordpressivan007](https://wordpress.org/support/users/wordpressivan007/)
 * (@wordpressivan007)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/focus-y-hover/#post-11294561)
 * 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/](https://www.casasoptimus.com/como-calcular-la-isoptica/)
   in the field with name “distancia d1” The change should be seen…
 * regards
 * Anibal
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/focus-y-hover/#post-11294609)
 * Hello [@wordpressivan007](https://wordpress.org/support/users/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.
 *  Thread Starter [wordpressivan007](https://wordpress.org/support/users/wordpressivan007/)
 * (@wordpressivan007)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/focus-y-hover/#post-11296851)
 * Hello Codepeople!
 * Your plugin is wonderful! We see how valuable it is! You do a great job.
 * regards
 * Anibal

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘:focus y :hover’ is closed to new replies.

 * ![](https://ps.w.org/calculated-fields-form/assets/icon-256x256.jpg?rev=1734377)
 * [Calculated Fields Form](https://wordpress.org/plugins/calculated-fields-form/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/calculated-fields-form/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/calculated-fields-form/)
 * [Active Topics](https://wordpress.org/support/plugin/calculated-fields-form/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/calculated-fields-form/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/calculated-fields-form/reviews/)

## Tags

 * [hover](https://wordpress.org/support/topic-tag/hover/)

 * 6 replies
 * 2 participants
 * Last reply from: [wordpressivan007](https://wordpress.org/support/users/wordpressivan007/)
 * Last activity: [7 years, 3 months ago](https://wordpress.org/support/topic/focus-y-hover/#post-11296851)
 * Status: resolved