About the input fields

  <div id="MF_1">
       <label for="MF_1_text" title="">
             Name:<abbr title="Required field">*</abbr>     
       </label>
       <input value="" name="MF_1" id="MF_1_text" required="" type="text">
  </div>

Each input field is put inside a <div> (a division or a section in an HTML document);

• the <label> element is used to display which information you need - in this example "Name"
• the <input> element is used to create an input field where the user can enter the requested information.
• The id (id="MF_1_text") makes clear the label and the input field belong together.

The input is decorated through two sets of CSS selectors:

• The first CSS selector places a shadow effect around the input area:

fieldset div input,
fieldset div textarea,
fieldset div select {
    line-height: 1;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12) !important;
}

• The second CSS selector displays a highlighted boundary around the input when the input has keyboard focus.

/* Custom focus selection */
input:focus,
textarea:focus,
select:focus {
    border: 2px solid #26a0ac;
}

Suppose you want to use an input field with a round corner. This can easily be done by using the border-radius property:

fieldset div input{
    line-height: 1;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12) !important;
    border-radius: 5px;
}

fieldset div textarea,
fieldset div select {
    line-height: 1;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12) !important;
    border-radius: 5px;
}

Same change if the input field has focus:

/* Custom focus selection */
input:focus,
textarea:focus,
select:focus {
    border: 2px solid #F99945;
    border-radius: 5px;
}