css optimization text box and button code

An example of CSS form beautification of text boxes and buttons

1. First, let’s take a look at the true colors of buttons and text boxes that often appear on web pages!

Comparing the above picture, how can we change the appearance of the text box and button? Below I provide you with two text box and button styles as examples. The first one is that the text box and button have no three-dimensional effect, but only have line color and fill color. You may have seen this effect on many websites. However, it gives people a special feeling, which is very good. The second effect is more special. It makes the text box have an effect similar to underline and is colored. At the same time, the background color of the button is no longer It's gray, but it's colored. It can be said that this is a very cool effect. Okay, let me talk about the detailed steps to achieve these two effects.

2. Text boxes and buttons without three-dimensional effects

Then we will take the editing operation of the web page in DW3 as an example to illustrate. First, we have already edited the web page. Corresponding form objects are inserted into it, such as inserting a text box and a button. At this time, we press the [F10] key to display the web page source code editing window. Then we edit the and tags:

From the style sheet above It can be seen that this effect is achieved through two styles, one for the text box and one for the button. Therefore, two different codes need to be inserted into the htm statements of the text box and button. In the text Inserted in the box is the class=smallInput code.
　For example, ,
In the button statement, class="buttonface" code is inserted, as in the example
　
In fact, this corresponds to the style of the text box and button in the style sheet. The final effect is as shown below:

Take a look at the above effect. Does it still remind you of the monotonous text boxes and buttons? The above two effects are achieved through style sheets, and the usage methods are also very simple.

The production of forms is the focus of web development. Through forms, interaction and communication can be achieved, and information collection and sharing can also be achieved. The two articles above discussed it from the perspective of semantics and structure. You You can also participate in discussions and learning!

The above is the detailed content of css optimization text box and button code. For more information, please follow other related articles on the PHP Chinese website!