CSS optimized text boxes and button codes

A case of text boxes and buttons with CSS form beautification

First, look at the page often appear in the button and text box of the original!

In contrast, how can we change the shape of the text box and the button? The following I provide you with two kinds of text box and button style as an example reference, the first is the text box and button without three-dimensional, just have line color and fill color, this effect everyone may have seen on many sites, give a special feeling, very good, the second effect is more special, is to make a text box like an underscore effect and is colored, and the background color of the button is no longer gray, but color, it can be said that this is a very cool effect, well, below I would like to say that the two effects of the implementation of the detailed procedures.

Two, no stereoscopic effect of text boxes and buttons

Then we will be in the DW3 of the page editing operations as an example to illustrate, first we have inserted the corresponding Form object in the page, such as inserting a text box and a button, at this time, we press the [F10] key, display the page Source Code Editing window, then we on the page

<style type= "Text/css" >
Input.smallinput{border:1 solid black; font-size:9pt; Font-style:normal; Font-variant:normal; Font-weight:normal; height:18px; Line-height:normal}
</style>

Well, the first step is done, and the next step is to add this code to the text box and the button's HTM statement:
Class=smallinput
For example, in <input type= "text" name= "TextField" class=smallinput> and
<input type= "Submit" name= "submit" value= "flat button" class=smallinput>
This code is added to the text box and the HTM statement of the button. The final effect is as follows:

How, compared to the previous picture of the standard button is not much more beautiful, to realize it is not too difficult.

Three, the color of the underlined text box and button effect

Similarly, we need the help of the stylesheet to achieve this effect, and the same as the first effect of the steps to insert a style sheet between the

. jb51.net]

<style type= "Text/css" >
Input.smallinput{background: #ffffff; Border-bottom-color: #ff6633; border-bottom-width:1px;border-top-width:0px; border-left-width:0px;border-right-width:0px; Solid #ff6633; Color: #000000; font-size:9pt; Font-style:normal; Font-variant:normal; Font-weight:normal; height:18px; Line-height:normal}
Input.buttonface{background: #ffcc00; border:1 solid #ff6633; COLOR: #ff0000; font-size:9pt; Font-style:normal; Font-variant:normal; Font-weight:normal; height:18px; Line-height:normal}
</style>

As you can see from the above style sheet, the implementation of this effect is achieved by two styles, one is the text box, one is a button, so in the text box and the button's HTM statement need to insert two different lines of code, the text box is inserted in the Class=smallinput code.
As example <input type= "text" name= "TextField" CLASS=SMALLINPUT>
The class= "ButtonFace" code is inserted in the button statement as an example
<input type= "Submit" name= "submit" value= "color button" class= "ButtonFace" >
This corresponds to the style of the text box and button in the style sheet, and the final effect is as follows:

Look at the effect above, and won't remind you of that monotonous text box and button? The methods of the above two effects are implemented by the style sheet, which is very simple to use.

Form is the focus of web development, through the form can be interactive and communication, but also to achieve the collection and sharing of information, the above two articles from the perspective of semantics and structure to discuss, you can also participate in discussion and learning!