The input input box is an indispensable component of web pages, but each browser has different display styles of input boxes.
For example:
The above picture is the input box that comes with Google Chrome and IE browser, and the style is not satisfactory, so most of them will write the styles themselves.
Here is a simple text box style
input{ border: 1px solid #ccc; padding: 7px 0px; border-radius: 3px; /*css3 attribute IE does not support */ padding-left:5px; } Reproduction image:
Style attribute meaning:
border: 1px solid #ccc; /*Set the input box border, the color, size, and solid dotted lines of the edge line*/
padding: 7px 0px; /* Set the height of the input box, you can also use height, but if you use height, the cursor of the input box will be placed on the top, and other styles must be set to fix it, and it may not be compatible.
border-radius: 3px; /*The property stone inside css3, IE does not support */
padding-left:5px; /*Let the ad be 5 pixels away from the left, and at the beginning the cursor is attached to the edge of the input box on the left*/
Basically, the above styles are more commonly used nowadays, and then some other settings of input
For example: attribute placeholder
This property has a prompt text effect in the input box. The CSS3 property does not support IE
Input click to glow special 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) } Reproduction image: