Help with CSS Class when styling focus field- can't get it right?

Hi there,

I’m trying to style my text area to match the input fields; basically, when clicked on the bottom border thickens. My input fields are working perfectly, but for some reason the CSS I have used for my text area isn’t working. I’m sure it’s something simple - I’ve tried appending the text area size to the end of the class but that doesn’t work. Can anyone with more experience shed some light?

/* This styles the input fields focus border */
.gform_wrapper .gfield input.large:focus {
    box-shadow:none;
        background-color: white;
    color: black;
    border-width: 2px;
    border-style: none;
    border-radius: 0px !important;
	border-color: black;
	border-top: 0px !important;
border-bottom: 2px solid black !important;
	border-left: 0px !important;
	border-right: 0px !important;
}
}
.gform_wrapper .gfield input.medium:focus {
    box-shadow:none;
      background-color: white;
    color: black;
    border-width: 2px;
    border-style: none;
    border-radius: 0px !important;
	border-color: black;
	border-top: 0px !important;
border-bottom: 2px solid black!important;
	border-left: 0px !important;
	border-right: 0px !important;
}
}
.gform_wrapper .gfield input.small:focus {
    box-shadow:none;
       background-color: white;
    color: black;
    border-width: 1px;
    border-style: none;
    border-radius: 0px !important;
	border-color: black;
	border-top: 0px !important;
border-bottom: 2px solid black !important;
	border-left: 0px !important;
	border-right: 0px !important;
}

.gform_wrapper .gfield textarea:focus
 {
    box-shadow:none;
       background-color: white;
    color: black;
    border-width: 3px;
    border-style: none;
    border-radius: 0px !important;
	border-color: black;
	border-top: 0px !important;
border-bottom: 2px solid black !important;
	border-left: 0px !important;
	border-right: 0px !important;
}

Can you share a link to the page on your site where we can see the form? Thank you.

Why do you have these double closing braces in your CSS?

That’s a copy paste error, please disregard.
The site is under development/not live yet, so unfortunately I can’t share a link :frowning:

Without seeing the form live, it will be hard to give you the CSS that works or see why your CSS is not working. Let us know when you have a page on the site where we can see the form, so we can help you with the CSS. Thank you.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.