Remove Blue Focus Border

  • Hello! I am using WPForms with Base and Form Theme Styling. I am having difficulty attempting to change the color of the focus border from blue. I also specifically wish to remove this border from appearing on the active Submit button. Below is the Additional CSS I’ve used:

    .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 input[type=range], .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 input[type=week], .wpforms-container select, .wpforms-container textarea {
    display: block !important;
    float: none !important;
    border: 1px solid #535353 !important;

}

.wpforms-form .wpforms-title {
		font-size: 30px !important;
		font-family: Helvetica !important;
    line-height: 45px !important;
}

.wpforms-form .wpforms-field-label {
    display: block !important;
		font-family: Helvetica !important;
		text-transform: uppercase  !important;
		color: #404040 !important;
}

.wpforms-form .wpforms-field-sublabel {
		font-size: 13px !important;
		line-height: 20.8px !important;
		font-weight: 700 !important;
		text-transform: uppercase  !important;
		display: block !important;
		font-family: Helvetica !important;
		color: #404040 !important;
}

.wpforms-form input[type=submit], 
.wpforms-form button[type=submit] {
		font-family: Georgia !important;
    background-color: #D31931 !important; /* Red background */
		font-family:  !important;
		font-size: 13px !important;
		font-weight: 700 !important;
    line-height: 37px !important;
		letter-spacing: 1px !important;
		color: #fffff !important;
		padding: 0 20px !important;
		border: 0px !important;
		border-width: 0px !important;
		border-radius: 0px !important;
		box-shadow: 2px 2px 2px #000000 !important;

	
}

.wpforms-form input[type=submit]:hover, 
.wpforms-form input[type=submit]:active, 
.wpforms-form button[type=submit]:hover, 
.wpforms-form button[type=submit]:active, 
.wpforms-form .wpforms-page-button:hover, 
.wpforms-form .wpforms-page-button:active {
    background-color: #000000 !important; /* Black background */
		border: 0px !important; /* Red, double-line border */
		cursor: pointer !important;
}

.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
		background-color: #000000 !important;
		border: 0px solid #000000 !important;
		cursor: pointer !important;

}

    I hope the above CSS code is viewable. I’m new to inserting code. Thank you so much in advance for any guidance!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Merrick K. Williams

    (@allmyblues)

    I’m adding two screenshots for further clarity. Thank you.

    https://pasteboard.co/m4w8LFpQSagv.jpg

    https://pasteboard.co/P1XKTNZM2z6V.jpg

    Hey @allmyblues – Thanks for reaching out!

    To fix the issue, you can consider adding following CSS: 

    
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 {
    box-shadow: none !important;
}

div.wpforms-container-full input[type=submit]:focus:after, div.wpforms-container-full button[type=submit]:focus:after, div.wpforms-container-full .wpforms-page-button:focus:after {
    border: none !important;
}

    It looks like there could be a styling conflict between the site theme and the forms. To fix this, please try the following custom CSS snippet:

    And in case it helps, here’s a tutorial on how to add custom CSS like this to your site.

    Hope this helps!

    Thread Starter Merrick K. Williams

    (@allmyblues)

    Thank you, @prashantrai ! It works! None of my personal settings elsewhere requested or displayed that color. I couldn’t figure out the source. But, yes, I suspected there was styling conflict with my theme. Thank you so much!

    Hey @allmyblues – You’e most welcome. If you have any questions, please feel free to reachout.

    Kindly,

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Remove Blue Focus Border’ is closed to new replies.

Tags