Change contact form input field border and background

• 

  jamiewkb · Member · Apr 16, 2015 at 12:32 am

  • Copy link
  • Add topic to favorites

  Hello again.

  I’m trying to figure out how to teach myself some basic CSS editing. I’m using Chrome’s Inspect Element tool to figure out how to identify the part of the code that belongs to the input fields background color and border. I thought I figured it out, but when I tried to insert the CSS into my site, nothing happened. So I must not quite have it figured.

  Here is what I entered that didn’t work for the form field border:

  .contact-form {
  	border-color: rgba(0,0,0,1);
  }

  I was able to change the border-color information using the Inspect Element tool in Chrome, but sticking that code in my CSS doesn’t do the same thing. I must be missing something. Once I know what that something is, I’ll be able to do more of those things without needing to ask for assistance. Or so I’m telling myself.

  Theme is Hemingway Rewritten.

  The blog I need help with is: (visible only to logged in users)

• 

  jamiewkb · Member · Apr 16, 2015 at 12:44 am

  • Copy link

  Wow. I don’t know if it’s right, but I was able to change the border color for each field with the following:

  input#g112-name {
  	border-color: black;
  }
  
  input#g112-email {
  	border-color: black;
  }
  
  textarea#contact-form-comment-g112-comment {
  	border-color: black;
  }

• 

  jamiewkb · Member · Apr 23, 2015 at 12:05 pm

  • Copy link

  I’d still like a follow up on this. Is there an easier way to change the background and or border color of the fields in bulk? As I mentioned above, I was able to do it on an individual basis, which is fine for a form that only has a few fields, but I’d like to know if I can change them all at once for a form that may have many, many fields.

  Thanks.

• 

  thesacredpath · Member · May 1, 2015 at 12:43 am

  • Copy link

  If what you are wanting to change is the same on several things, you can comma separate the CSS selectors like this.

  input#g112-name, input#g112-email, textarea#contact-form-comment-g112-comment {
      border-color: black;
  }