We have seen various input buttons defined by CSS, but the select statement cannot be implemented simply by defining input. The following provides another css definition method to dazzle your select.
CSS section:
The code is as follows: |
Copy code |
. Select *{ Margin: 0; Padding: 0; } . Select { Border: 1px solid # cccccc; Float: left; Display: inline; } . Select div { Border: 1px solid # f9f9f9; Float: left; } /* Sub-selector, which can be recognized in non-IE browsers such as FF */ . Select> div { Width: 120px; Height: 17px; Overflow: hidden; } /* Wildcard selection character, which is recognized only in IE browser */ * Html. select div select { Display: block; Float: left; Margin:-2px; } . Select div> select { Display: block; Width: 124px; Float: none; Margin:-2px; Padding: 0px; } . Select: hover { Border: 1px solid #666666; // effect of moving the cursor over } . Select> option { Text-indent: 2px; // option is indented by non-IE browsers such as FF 2px } XHTML section: <Div class = "select"> <Div> <Select> <Option> Webpage Tutorial network </option> <Option> Webpage Tutorial network </option> <Option> Webpage Tutorial network </option> </Select> </Div> </Div>
|