Use style sheets skillfully to make text boxes and buttons look like

Buttons | text boxes | Style sheets are made in Web pages, the object in the form always gives a monotonous and dreary feeling, such as buttons, text boxes, and so on, their stereotyped appearance and color appear on your homepage, it will damage the beauty of the homepage more or less, so can you change their appearance? My answer is, of course, this can be ah, the following we will start to change it.

Take a look at the buttons and text boxes that often appear in your Web pages.

What can we do to change the shape of text boxes and buttons? Then I'll give you two kinds of text boxes and button styles as examples for reference, the first is the text box and button No three-dimensional, just have line color and fill color, this effect everyone may have seen on many sites, giving a special feeling, very good, the second effect is more special, is to make a text box similar to the underline effect and is colored, while the button background color is no longer gray, but color, it can be said that this is a very cool effect, OK, I would like to say that the two effects of the implementation of the detailed procedures.

　　 First effect: text boxes and buttons without stereo effects
So let's illustrate that by editing the page in DW3, first we have inserted the corresponding form object in the webpage, such as inserting a text box and a button, at this time, we press [F10] key, display the page Source Code edit window, that we in the webpage <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>
All right, the first step is done, and next we'll add this code to the text box and the HTM statement of the button:
Class=smallinput
For example, in <input type= "text" name= "TextField" class=smallinput> and <input type= "submit" name= "submit" value= "flat button" This code is added to the Class=smallinput> text box and the button's HTM statement. The final effect is shown below:

How, compared to the previous picture in the standard button is not more beautiful, it is not too difficult to achieve it.

　　 second Effect: Colored Underline text boxes and button effects
Also, we need the help of the stylesheet to achieve this effect, and insert the style sheet between the <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 style sheet above, the implementation of this effect is achieved through two styles, one is the text box, one is the button, so in the text box and the button in the HTM statement you need to insert two different code, in the text box is inserted in the Class=smallinput code such as example <input type= "text" name= "TextField" CLASS=SMALLINPUT&GT; the class= "ButtonFace" code is inserted in the button statement, such as example <input type= " Submit "Name=" Submit "value=" "Color button" class= "ButtonFace" > Actually, this corresponds to the style of the text box and the button in the style sheet, and the final effect is as follows:

Look at the above effect, will not remind you of that monotonous text box and button? The above two methods are achieved through the style sheet, the use of the method is also very simple, do not say to me that this is very difficult oh, the most sincere hope that through this article introduced the method can make your homepage a little more wonderful. Otherwise, I'm sorry for the dark circles of my eyes.