CSS form-text input box beautifying CSS tutorial

CSS form-text input box beautifying CSS tutorial
[Code] yesterday I made a form template to show you the dazzling and beautiful fashion form template. Today I will take a closer look at the beautification steps of the text input box, and the experts will see it. CSS beautification is actually a matter of principle. If you have understood the principle, many things will be easy to understand.

First of all, we all know that if the text input box is not CSS beautifying, it is directly placed in the page, and it is difficult to integrate with the overall design, which is also the main reason for us to beautify. The following is the HTML of an input text box.Code:

 
Now we will start to beautify it. This tutorial combines the form template of yesterday to give you a detailed breakdown, so the code is basically referring to the form template of yesterday. First, we will make a basic setting for all input objects, and set basic elements such as margin, padding, border, Font, and float, because this setting can be inherited, therefore, if it is the same setting, we do not need to write any more when defining the inherited classes or objects. Instead, we only need to write something different. Next I will list the basic CSS code.

Input
{
Border-left: # fff 1px solid;
Border-top: # fff 1px solid;
Border-Right: # fff 1px solid;
Border-bottom: # fff 1px solid;
Margin: 0px 0px 15px 10px;
Padding-left: 10px;
Background: # CCC;
Float: left;
Font-size: 1em;
Line-Height: 1.5em;
Height: 20px;
Text-align: left;
}
Here I want to explain, in fact, some abbreviations will be used in the process of using CSS frequently. The advantage is that it can reduce the size of CSS code, but in my experience, in fact, abbreviations are not the best method. Of course, there are few browser types in China, so the compatibility problems are relatively small, however, browsers in some developed countries use many types of Web browsers, which are often abbreviated and unrecognized. Now I have noticed that the settings of the border and padding attributes are generally not abbreviated by experienced CSS authors, for example, the border settings shown above are divided into four attributes to write.

After the above settings, you can see that the input box has basically achieved a plane effect. The details are divided into three parts:
1. Border background

Border-left: # fff 1px solid;
Border-top: # fff 1px solid;
Border-Right: # fff 1px solid;
Border-bottom: # fff 1px solid;
Margin: 0px 0px 15px 10px;
Padding-left: 10px;
Background: # CCC;
2. Floating settings

Float: left;
3. Text Control

Font-size: 1em;
Line-Height: 1.5em;
Height: 20px;
Text-align: left;
If you are interested, you can change the above settings, and then you can easily understand the effect.

Next, we also need to set and define the input box separately, mainly because the definition of the input box is different from the basic input definition. Let's look at the Code:

Input. textbox
{
Margin: 0px 60px 8px 0px;
Padding-left: 0px;
Padding-top: 0px;
Padding-Right: 0px;
Padding-bottom: 0px;
Background: url(field.gif) Repeat-x left 50%;
Width: 270px;
Color: #111;
}
We have rewritten the attributes of margin, padding-left, and background. In this case, the last settings here prevail, in addition, the width and width attributes and the text color attributes are added. The entire input text input box is basically formed. You can run the following code to see the final result.

This article from the csdn blog, reproduced please indicate the source: http://blog.csdn.net/nxbin/archive/2009/01/17/3798029.aspx