How do I make good-looking form styles with CSS styles? (code example)

This article mainly introduces the CSS form style of the beautifully crafted code method. A good-looking form style, for the overall effect of the site is crucial, not only for users to view, but also suitable for webmaster management site.

A detailed example of the elegant form form CSS style code is as follows:

Form code:

<form class= "Form" >    <p class= "name" >      <input type= "text" name= "name" id= "name"/>      < Label for= "name" >Name<span> graphs </span><i> libraries </i></label>    </p>    <p class= "Email" >      <input type= "text" name= "email" id= "email"/> <label for=      "email" >E-mail< span> Charts </span><i> Libraries </i></label>    </p>    <p class= "Web" >      <input Type= "text" name= "Web" id= "Web"/>      <label for= "web" >Website<span> graphs </span><i> Libraries </ i></label>    </p>    <p class= "text" >      <textarea name= "text" ></textarea >    </p>    <p class= "Submit" >      <input type= "Submit" value= "Send"/>    </p>  </form>

CSS style code:

Input, textarea {padding:9px;    Border:solid 1px #E5E5E5;    outline:0;    Font:normal 13px/100% Verdana, Tahoma, Sans-serif;    width:200px;    Background: #FFFFFF url (' bg_form.png ') left top repeat-x;    Background:-webkit-gradient (linear, left top, left, from (#FFFFFF), Color-stop (4, #EEEEEE), to (#FFFFFF));    Background:-moz-linear-gradient (top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);    Box-shadow:rgba (0,0,0, 0.1) 0px 0px 8px;    -moz-box-shadow:rgba (0,0,0, 0.1) 0px 0px 8px;    -webkit-box-shadow:rgba (0,0,0, 0.1) 0px 0px 8px;    } textarea {width:400px;    max-width:400px;    height:150px;    line-height:150%;     } input:hover, Textarea:hover, Input:focus, Textarea:focus {border-color: #C9C9C9;    -webkit-box-shadow:rgba (0, 0, 0, 0.15) 0px 0px 8px;     }. form label {margin-left:10px;     Color: #999999;    }. Submit input {Width:auto;    PADDING:9PX 15px;    Background: #617798;    border:0;    font-size:14px; ColOr: #FFFFFF;    -moz-border-radius:5px;    -webkit-border-radius:5px; }

Effects such as:

Note:

The Box-shadow property adds one or more shadows to the box. This property is a comma-delimited list of shadows, each of which is specified by a 2-4-length value, an optional color value, and an optional inset keyword. The value of the omitted length is 0. You can use the Border-image-* property to construct beautiful retractable buttons!

Possible values:

H-shadow required. The position of the horizontal shadow. Negative values are allowed.

V-shadow required. The position of the vertical shadow. Negative values are allowed.

Blur is optional. Blur distance.

Spread is optional. The size of the shadow.

Color is optional. The color of the shadow.

Inset is optional. Change external Shadow (outset) to inner shadow