CSS text box and button beautification code

I. first look at the buttons and text boxes that often appear on the web page!

In contrast, how can we change the text box and button appearance? Below I will provide you with two types of text boxes and button styles as an example reference. The first one is that the text box and button have no stereoscopic effect, just wired color and fill color, this effect may have been seen on many websites. It gives you a special feeling. The second effect is quite special, the text box is made into a color effect similar to the underline, and the background color of the button is no longer gray, but color. It can be said that this is a very cool effect, the following describes the detailed operation steps for the two effects.

2. Text Box and button with no stereoscopic effect

In this case, the edit operation on the web page in dw3 is used as an example. First, we have inserted the corresponding form object in the web page, such as inserting a text box and a button. At this time, press the [F10] key to display the webpage.Source codeEdit window, insert the style sheet between the Input. smallinput {border: 1 solid black; font-size: 9pt; font-style: normal; font-variant: normal; font-weight: normal; Height: 18px; line-height: normal}
</Style>

Now, the first step is complete. Next, we will add this sentence to the HTM statement of the text box and the button respectively.Code:
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 about it? compared to the standard button in the previous figure, it is not too difficult to implement it.

3. color-based underline text box and button Effect

Similarly, we also need the help of a style sheet to achieve this effect. Like the first operation, we need 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>

We can see from the above style sheet that the implementation of this effect is achieved through two styles, one is the text box and the other is the button, therefore, you need to insert two different codes in the text box and the button HTM statement. The class = smallinput code is inserted in the text box.
For example, <input type = "text" name = "textfield" class = smallinput>,
Insert the class = "buttonface" code in the button statement, as shown in the following example:
<Input type = "Submit" name = "Submit" value = "color button" class = "buttonface">
In fact, this corresponds to the text box and button style in the style sheet. The final effect is shown in:

Looking at the above results, will it remind you of the monotonous text box and button? The above two effects are implemented through style sheets, which are also very simple to use.

Form creation is the focus of web development. Through forms, you can achieve interaction and communication, or collect and share information.ArticleWe have discussed the meaning and structure. You can also participate in the discussion and learning!