When we conduct CSS webpage layout, we often encounter the select drop-down list. We can apply CSS to control the elements of the form. But how should we set the select style in the drop-down list?
Let's take a look at the following xhtml code, which is a typical drop-down list select:
The code is as follows: |
Copy code |
<Select> <Option> I love CSS. </option> <Option> Div + CSS tutorial </option> <Option> CSS layout instance </option> <Option> CSS2.0 tutorial </option> <Option> CSS online manual </option> <Option> Web standard </option> <Option> XHTML tutorial </option> </Select> |
Let's take a look at the CSS code that controls it:
The code is as follows: |
Copy code |
Div { Border: 1px solid # C0C0C0; Width: 183px; Height: 18px; Clip: rect (0px, 18px, 22px, 0px ); Overflow: hidden; } Select { Position: relative; Left:-2px; Top:-2px; Font-size: 12px; Width: 185px; Line-height: 18px; border: 0px; Color: #909993; } |
Let's take a look at the running effect:
I love CSS.
Div + CSS tutorial
CSS layout example
CSS2.0 tutorial
CSS online manual
Web standards
XHTML tutorial