HTML page input box to beautify

The input box is an essential component of the Web page, but each browser has a different display style for the input box

For example:

Is the Google browser and IE browser with the display of the input box, style is not satisfactory, so most will write their own style

Here's a simple text box style

            input{                border: 1px solid #ccc                padding: 7px 0px;                 Border-radius: 3px; /*css3 property IE does not support */                padding-left:5px;             }

：

style attribute meaning:

border:1px solid #ccc;  /* Set the border of the input box, the color of the edge line, the size, and the solid dashed line */

PADDING:7PX 0px; /* Set the input box height, you can also use height, but with height, the input box cursor will be placed on the top, but also to set other styles to fixed, and not necessarily compatible very good */

border-radius:3px; /* This attribute stone CSS3 inside, ie does not support */

padding-left:5px;  /* Make the ad 5 pixels to the left, and the first cursor is the edge of the left input box. */

Basically the above style is now more commonly used

Then there are some other settings for input

For example: attribute placeholder

This property has a hint text effect in the input box, CSS3 property, ie not supported

Input Click the Glow effect:

input{Border:1px solid #ccc;padding:7px 0px;Border-radius:3px;Padding-left:5px;-webkit-box-shadow:inset 0 1px 1px rgba (0,0,0,.075);Box-shadow:inset 0 1px 1px rgba (0,0,0,.075);-webkit-transition:border-color ease-in-out. 15s,-webkit-box-shadow ease-in-out. 15s;-o-transition:border-color ease-in-out. 15s,box-shadow ease-in-out. 15s;transition:border-color ease-in-out. 15s,box-shadow ease-in-out. 15s}Input:focus{Border-color:#66afe9;Outline:0;-webkit-box-shadow:inset 0 1px 1px rgba (0,0,0,.075), 0 0 8px Rgba (102,175,233,.6);Box-shadow:inset 0 1px 1px rgba (0,0,0,.075), 0 0 8px Rgba (102,175,233,.6)}

：

HTML page input box to beautify