Control Html form fields individually in CSS

Question

I am building a very simple form using this tutorial.

I need to control fields individually in CSS.

Right now if i mess with one field, the rest of the fields are affected as well.

How can i do that?

Form html:

<form name="contactform" class="contact_form" method="post" name="contact_form" action="send_form_email.php">
          <ul>
              <li>
                  <label for="name"></label>
                  <input type="text"  placeholder="John Doe" required />
              </li>
            </ul>
            <ul id="telephone">
                <li>
                    <label for="telephone"></label>
                    <input type="text"  placeholder="John Doe" required />
                </li>
              </ul>
      </form>

Form CSS:

/* === Remove input autofocus webkit === */
*:focus {outline: none;}

/* === Form Typography === */
body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}
.contact_form h2, .contact_form label {font-family:Georgia, Times, "Times New Roman", serif;}
.form_hint, .required_notification {font-size: 11px;}

/* === List Styles === */
.contact_form ul {
    width:750px;
    list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0px;
}
.contact_form li{
  padding: 12px;
border-bottom: 1px solid #eee;
position: relative;
margin-left: -180px;
margin-top: 20px;
}
.contact_form li:first-child, .contact_form li:last-child {
    border-bottom:1px solid #777;
}

/* === Form Header === */
.contact_form h2 {
    margin:0;
    display: inline;
}
.required_notification {
    color:#d45252;
    margin:5px 0 0 0;
    display:inline;
    float:right;
}

/* === Form Elements === */
.contact_form label {
    width:150px;
    margin-top: 3px;
    display:inline-block;
    float:left;
    padding:3px;
}
.contact_form input {
  height: 20px;
width: 180px;
padding: 5px 8px;
}
.contact_form textarea {padding:8px; width:300px;}
.contact_form button {margin-left:156px;}

    /* form element visual styles */
    .contact_form input, .contact_form textarea {
        border:1px solid #aaa;
        box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
        border-radius:12px;
        padding-right:30px;
        -moz-transition: padding .25s;
        -webkit-transition: padding .25s;
        -o-transition: padding .25s;
        transition: padding .25s;
    }
    .contact_form input:focus, .contact_form textarea:focus {
        background: #fff;
        border:1px solid #555;
        box-shadow: 0 0 3px #aaa;
        padding-right:70px;
    }

/* === HTML5 validation styles === */
.contact_form input:required, .contact_form textarea:required {
    background: #fff url(images/red_asterisk.png) no-repeat 98% center;
}
.contact_form input:required:valid, .contact_form textarea:required:valid {
    background: #fff url(images/valid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
    background: #fff url(images/invalid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

/* === Form hints === */
.form_hint {
    background: #d45252;
    border-radius: 3px 3px 3px 3px;
    color: white;
    margin-left:8px;
    padding: 1px 6px;
    z-index: 999; /* hints stay above all other elements */
    position: absolute; /* allows proper formatting if hint is two lines */
    display: none;
}
.form_hint::before {
    content: "\25C0";
    color:#d45252;
    position: absolute;
    top:1px;
    left:-6px;
}
.contact_form input:focus + .form_hint {display: inline;}
.contact_form input:required:valid + .form_hint {background: #28921f;}
.contact_form input:required:valid + .form_hint::before {color:#28921f;}

/* === Button Style === */
button.submit {
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
    background: -webkit-linear-gradient(top, #68b12f, #50911e);
    background: -moz-linear-gradient(top, #68b12f, #50911e);
    background: -ms-linear-gradient(top, #68b12f, #50911e);
    background: -o-linear-gradient(top, #68b12f, #50911e);
    background: linear-gradient(top, #68b12f, #50911e);
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    font-weight: bold;
    padding: 6px 20px;
    text-align: center;
    text-shadow: 0 -1px 0 #396715;
}
button.submit:hover {
    opacity:.85;
    cursor: pointer;
}
button.submit:active {
    border: 1px solid #20911e;
    box-shadow: 0 0 10px 5px #356b0b inset;
    -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
    -moz-box-shadow: 0 0 10px 5px #356b0b inset;
    -ms-box-shadow: 0 0 10px 5px #356b0b inset;
    -o-box-shadow: 0 0 10px 5px #356b0b inset;

}

Answer 1

Your input tags will probably end up with name attributes:

<input type="text" name="telephone">

So you can reference them like so:

input[name=telephone] { ...

Answer 2

Both of the answers already here would work. You can specifically select any HTML element to style in CSS with IDs or Classes. However, the two are very different things. Read up on the difference here.

HTML:

<input id="myUniqueID" class="myClass" />
<input id="myOtherID" class="myClass" />

CSS:

input { color: black; background: white; }
input#myUniqueID { color: red; }
input.myClass { background: blue; }

Output:
You have two input elements and you have globally styled them with black text and white backgrounds. However, you have also given them IDs and Classes to help them stand out. IDs must be unique, so there can only be one of them. With this CSS, the first element will therefor have red text while the second will still have black text. Even though it is given a separate ID, it isn't used for anything and that's okay. Classes can select multiple elements, so both of the inputs will have blue backgrounds rather than white ones.

Answer 3

One way:

Give each field you want to control a unique id:

<input id="input1" />

Then in your css, address it like so:

#input1
{
    style: value;
}

Answer 4

Add a class name to your input tag, so instead of selecting:

.contact_form input {...}

you could do:

.contact_form input.telephone {...}

and your html would look like this:

 <input type="text" class="telephone" placeholder="John Doe" required />