Title: Focus border css
Last modified: September 1, 2024

---

# Focus border css

 *  Resolved [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [1 year, 9 months ago](https://wordpress.org/support/topic/focus-border-css/)
 * How do I style all forms and not only ID-25? Please add this to tutorial! Noone
   styles one form….
 * Also: how do I remove focus border entirely…
 * Also how do I get all buttons to inherit the button style of theme? In this case
   FSE TT4. You apply:
    - incorrect font size
    - incorrect font weight
    - incorrect border radius
    - incorrect background color
    - incorrect BC hover
 * Please elaborate why you do not inherit this stuff as priority 1! Note: button
   styles are edited globally for full site edit themes now and it is seriously 
   a waste of time to add css like:
 *     ```wp-block-code
       .wpforms-container input[type=date],.wpforms-container input[type=datetime],.wpforms-container input[type=datetime-local],.wpforms-container input[type=email],.wpforms-container input[type=month],.wpforms-container input[type=number],.wpforms-container input[type=password],.wpforms-container .wpforms-container input[type=search],.wpforms-container input[type=tel],.wpforms-container input[type=text],.wpforms-container input[type=time],.wpforms-container input[type=url],.wpforms-container select,.wpforms-container input[type=week],.wpforms-container textarea  {	/*background-color: transparent !important;*/	border: none !important;	border-bottom: 1px solid #A4A4A4 !important;	border-radius: 0px !important;}
       ```
   
 *     ```wp-block-code
       .wpforms-form input[type="submit"], .wpforms-form button[type="submit"] {	border: none !important;	margin: 10px 10px 10px 0px;	padding: 10px 20px !important;	border-radius: 8px !important;	background-color: black !important;	font-size: 1em !important;	color: white !important;	text-transform: none !important;	letter-spacing: 0px !important;}/****** Form Input Buttons Hover ********/.wpforms-form input[type="submit"]:hover,.wpforms-form button[type="submit"]:hover {	background-color: #636363 !important;	text-decoration: none !important;}
       ```
   
    1. It takes forever
    2. It’s messy
    3. bad load time
    4. and most important – IT DOES NOT CHANGE WITH THE NEXT THEME
 * Based on time wasted for css of wpforms I could cosider another plugin. Is the
   solution to remove wpforms css ad then style from bottom up??? So frustrating
 * Thx
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ffocus-border-css%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Plugin Support [Ralden Souza](https://wordpress.org/support/users/rsouzaam/)
 * (@rsouzaam)
 * [1 year, 9 months ago](https://wordpress.org/support/topic/focus-border-css/#post-17990376)
 * Hi [@hebhansen](https://wordpress.org/support/users/hebhansen/),
 * Thank you for reaching out! I apologize for the current limitation in defining
   styles globally.
 * The best solution for this is to use [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*).
   You can find the root variables for WPForms in this file: `wp-content/plugins/
   wpforms-lite/src/Frontend/CSSVars.php`.
 * To demonstrate the solution, I recorded [this screencast](https://a.supportally.com/v/EoqwXL)
   for you.
 * Here’s the CSS snippet I used in [WPCode Lite](https://wordpress.org/plugins/insert-headers-and-footers/):
 *     ```wp-block-code
       :root{    --wpforms-field-focus-color: transparent;	--wpforms-field-background-color2: yellow;	--wpforms-field-border-color2: transparent;	--wpforms-button-background-color2: black;}div.wpforms-container-full input[type=submit]:not(:hover):not(:active), div.wpforms-container-full button[type=submit]:not(:hover):not(:active), div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full input[type=submit]:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full button[type=submit]:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active) {	background-color: var(--wpforms-button-background-color2);}div.wpforms-container-full input[type=date], div.wpforms-container-full input[type=datetime], div.wpforms-container-full input[type=datetime-local], div.wpforms-container-full input[type=email], div.wpforms-container-full input[type=month], div.wpforms-container-full input[type=number], div.wpforms-container-full input[type=password], div.wpforms-container-full input[type=range], div.wpforms-container-full input[type=search], div.wpforms-container-full input[type=tel], div.wpforms-container-full input[type=text], div.wpforms-container-full input[type=time], div.wpforms-container-full input[type=url], div.wpforms-container-full input[type=week], div.wpforms-container-full select, div.wpforms-container-full textarea, .wp-core-ui div.wpforms-container-full input[type=date], .wp-core-ui div.wpforms-container-full input[type=datetime], .wp-core-ui div.wpforms-container-full input[type=datetime-local], .wp-core-ui div.wpforms-container-full input[type=email], .wp-core-ui div.wpforms-container-full input[type=month], .wp-core-ui div.wpforms-container-full input[type=number], .wp-core-ui div.wpforms-container-full input[type=password], .wp-core-ui div.wpforms-container-full input[type=range], .wp-core-ui div.wpforms-container-full input[type=search], .wp-core-ui div.wpforms-container-full input[type=tel], .wp-core-ui div.wpforms-container-full input[type=text], .wp-core-ui div.wpforms-container-full input[type=time], .wp-core-ui div.wpforms-container-full input[type=url], .wp-core-ui div.wpforms-container-full input[type=week], .wp-core-ui div.wpforms-container-full select, .wp-core-ui div.wpforms-container-full textarea {	background-color: var(--wpforms-field-background-color2);	border-color: var(--wpforms-field-border-color2);}div.wpforms-container-full input[type=date]:focus:invalid, div.wpforms-container-full input[type=datetime]:focus:invalid, div.wpforms-container-full input[type=datetime-local]:focus:invalid, div.wpforms-container-full input[type=email]:focus:invalid, div.wpforms-container-full input[type=month]:focus:invalid, div.wpforms-container-full input[type=number]:focus:invalid, div.wpforms-container-full input[type=password]:focus:invalid, div.wpforms-container-full input[type=range]:focus:invalid, div.wpforms-container-full input[type=search]:focus:invalid, div.wpforms-container-full input[type=tel]:focus:invalid, div.wpforms-container-full input[type=text]:focus:invalid, div.wpforms-container-full input[type=time]:focus:invalid, div.wpforms-container-full input[type=url]:focus:invalid, div.wpforms-container-full input[type=week]:focus:invalid, div.wpforms-container-full select:focus:invalid, div.wpforms-container-full textarea:focus:invalid, .wp-core-ui div.wpforms-container-full input[type=date]:focus:invalid, .wp-core-ui div.wpforms-container-full input[type=datetime]:focus:invalid, .wp-core-ui div.wpforms-container-full input[type=datetime-local]:focus:invalid, .wp-core-ui div.wpforms-container-full input[type=email]:focus:invalid, .wp-core-ui div.wpforms-container-full input[type=month]:focus:invalid, .wp-core-ui div.wpforms-container-full input[type=number]:focus:invalid, .wp-core-ui div.wpforms-container-full input[type=password]:focus:invalid, .wp-core-ui div.wpforms-container-full input[type=range]:focus:invalid, .wp-core-ui div.wpforms-container-full input[type=search]:focus:invalid, .wp-core-ui div.wpforms-container-full input[type=tel]:focus:invalid, .wp-core-ui div.wpforms-container-full input[type=text]:focus:invalid, .wp-core-ui div.wpforms-container-full input[type=time]:focus:invalid, .wp-core-ui div.wpforms-container-full input[type=url]:focus:invalid, .wp-core-ui div.wpforms-container-full input[type=week]:focus:invalid, .wp-core-ui div.wpforms-container-full select:focus:invalid, .wp-core-ui div.wpforms-container-full textarea:focus:invalid {	border-color: var(--wpforms-field-focus-color);	box-shadow: var(--wpforms-field-focus-color);}div.wpforms-container-full input[type=date]:focus, div.wpforms-container-full input[type=datetime]:focus, div.wpforms-container-full input[type=datetime-local]:focus, div.wpforms-container-full input[type=email]:focus, div.wpforms-container-full input[type=month]:focus, div.wpforms-container-full input[type=number]:focus, div.wpforms-container-full input[type=password]:focus, div.wpforms-container-full input[type=range]:focus, div.wpforms-container-full input[type=search]:focus, div.wpforms-container-full input[type=tel]:focus, div.wpforms-container-full input[type=text]:focus, div.wpforms-container-full input[type=time]:focus, div.wpforms-container-full input[type=url]:focus, div.wpforms-container-full input[type=week]:focus, div.wpforms-container-full select:focus, div.wpforms-container-full textarea:focus, .wp-core-ui div.wpforms-container-full input[type=date]:focus, .wp-core-ui div.wpforms-container-full input[type=datetime]:focus, .wp-core-ui div.wpforms-container-full input[type=datetime-local]:focus, .wp-core-ui div.wpforms-container-full input[type=email]:focus, .wp-core-ui div.wpforms-container-full input[type=month]:focus, .wp-core-ui div.wpforms-container-full input[type=number]:focus, .wp-core-ui div.wpforms-container-full input[type=password]:focus, .wp-core-ui div.wpforms-container-full input[type=range]:focus, .wp-core-ui div.wpforms-container-full input[type=search]:focus, .wp-core-ui div.wpforms-container-full input[type=tel]:focus, .wp-core-ui div.wpforms-container-full input[type=text]:focus, .wp-core-ui div.wpforms-container-full input[type=time]:focus, .wp-core-ui div.wpforms-container-full input[type=url]:focus, .wp-core-ui div.wpforms-container-full input[type=week]:focus, .wp-core-ui div.wpforms-container-full select:focus, .wp-core-ui div.wpforms-container-full textarea:focus {	border-color: var(--wpforms-field-focus-color);	box-shadow: var(--wpforms-field-focus-color);}
       ```
   
 * I understand how frustrating this limitation can be, and I appreciate your feedback.
   I’ll make sure to share it with the team. We will work on new documentation to
   explain how to use CSS Variables for this solution.
 * Thanks!
 *  Plugin Support [Ralden Souza](https://wordpress.org/support/users/rsouzaam/)
 * (@rsouzaam)
 * [1 year, 9 months ago](https://wordpress.org/support/topic/focus-border-css/#post-17998559)
 * Hi [@hebhansen](https://wordpress.org/support/users/hebhansen/),
 * We haven’t heard back from you in a few days, so I’m going to go ahead and close
   this thread for now. But if you’d like us to assist further, please feel welcome
   to continue the conversation.
 * Thanks!

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

The topic ‘Focus border css’ is closed to new replies.

 * ![](https://ps.w.org/wpforms-lite/assets/icon.svg?rev=3254748)
 * [WPForms - Easy Form Builder for WordPress - Contact Forms, Payment Forms, Surveys, & More](https://wordpress.org/plugins/wpforms-lite/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wpforms-lite/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wpforms-lite/)
 * [Active Topics](https://wordpress.org/support/plugin/wpforms-lite/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wpforms-lite/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wpforms-lite/reviews/)

## Tags

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

 * 2 replies
 * 2 participants
 * Last reply from: [Ralden Souza](https://wordpress.org/support/users/rsouzaam/)
 * Last activity: [1 year, 9 months ago](https://wordpress.org/support/topic/focus-border-css/#post-17998559)
 * Status: resolved