[Plugin: Contact Form 7] Adding Classes

Hi,

I’m new to WordPress and have just installed your contact form.

I downloaded the styles.css and added the following two classes.

.blueform input[type=text], textarea {
  -webkit-transition: all 0.90s ease-in-out;
  -moz-transition: all 0.90s ease-in-out;
  -ms-transition: all 0.90s ease-in-out;
  -o-transition: all 0.90s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}

.blueformfocus input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);

The page I have my contact form is https://msuth.co.uk/tdp/3/contact-us/ as you can see, the multi-line textbox at the bottom picks up the css but the single line ones won’t.

The site I got this CSS from is https://css-tricks.com/snippets/css/glowing-blue-input-highlights/

I had to give both blocks a name (.blueform and .blueformfocus) as without this it affected the search bar at the top.

https://www.ads-software.com/extend/plugins/contact-form-7/