CSS text box and button beautification effect code _ Experience Exchange

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 use the DW3 in 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, the page source Code Editing window, then we in the pageAndInsert this style sheet between the tabs:

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
such as in And
　　
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 style sheet help to achieve this effect, and the first effect of the same steps in the Web pageAndInsert style sheet between tags:

. jb51.net]
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 an example ，
The class= "ButtonFace" code is inserted in the button statement as an example
　　
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, will not remind you of the 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 production 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!

