Focus border css

  • Resolved hebhansen

    (@hebhansen)


    3 weeks, 2 days ago

    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:


    .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;
    }
    .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 to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Ralden Souza

    (@rsouzaam)

    Hi @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. 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 for you.

    Here’s the CSS snippet I used in WPCode Lite:

    :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

    (@rsouzaam)

    Hi @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)
  • You must be logged in to reply to this topic.

Tags