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

Get Help
1

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;
}
2

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

3

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

4

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:

5

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.

6

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