CSS optimized text boxes and button codes

Source: Internet
Author: User
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}

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:
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}

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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.