During web development, there is often a special input element in the Information entry interface, such as: required field, date selection field, and field selected value in the pop-up window, using CSS to set the appearance of these elements saves unnecessary buttons and prompts to make the page more concise.
The effect is as follows:
To achieve this effect, you only need one image:
CSS code is simple: HTML code
- <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <HTML xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "ZH-CN" dir = "LTR">
- <Head>
- <Title> old Wang-CSS technology website next door </title>
- </Head>
- <Style type = "text/CSS">
- . Input1,. input2,. input3 {
- Padding: 0;
- Height: 15px;
- Line-Height: 15px;
- Border: 1px solid # abaffb;
- Background: url(inputbk.gif) No-repeat right 0;
- Width: 300px;
- }
- . Input2 {
- Background-position: Right-15px;
- }
- . Input3 {
- Background-position: Right-30px;
- Background-repeat: Repeat-X;
- }
- </Style>
- <Body>
- <H2> Use CSS flexibly to control the appearance of input elements. <br/> unnecessary buttons and prompts are skipped. </H2>
- <Input class = "input3" value = "use CSS flexibly, required field"/> </br> </BR>
- <Input class = "input1" value = "wallimn"/> </br> </BR>
- <Input class = "input2" value = "http://wallimn.iteye.com"/>
- </Body>
- </Html>
