First, let's take a look at the creation of the HTML Select drop-down box style:
The native Select drop-down box is actually handy, just write options to option to get a smooth drop-down box, but the native style is also a sad one.
First of all, the results of the styles rendered in the major browsers are also diversified, and the styles under IE are very different and will slide according to the location of the options.
We're making it in plain HTML, and not even cascading stylesheets:
<!doctype html>The one I opened after:
Now that we have finished making the dropdown box for the HTML Select, let's look at the other styling ideas for the HTML select:
1. First remove the original style of the select itself.
2. Use an element (Div/lebal, etc.) as the parent element of the Select.
3. After the Select parent element, use: After to make a new style.
<body> <br/> <select id= "selecttravelcity" title= "Select Travel Destination" > <option>php Chinese web </option> <option>washington dc</option> <option>los Ang Eles</option> <option>Chicago</option> <option>Houston</option> <option>Philadelphia</option> <option>Phoenix</option> </select> <br/> <br/> <label id= "Lblselect" > <select id= "selectpointofinterest" t Itle= "Select points of Interest nearby" > <option>topic.alibabacloud.com</option> <option>food beverage</option> <option>restaurant</option> <o ption>shopping</option> <option>taxi limo</option> <option>theatr E</option> <option>museum</option> <option>computers</option> </SELECT&G T </label></body>So much, though not difficult, but to practice more.
Look at the above picture, this is also very easy to think about it, but I will still give:
Two case studies of the HTML Select tag:
Case one: How to make the select in HTML not selectable?
Suppose there is a select, which has a few options, because the test needs to be fixed to become one of the option, can not choose the other, how to do? If disabled this select, the result is no value at all. Is there any other way? ReadOnly, is also not possible, still can choose.
Answer: Just put one option on it or add disabled= "disabled" to option.
<form id= "Form1" Name= "Form1" method= "Post" action= "" > <select name= "select" > <option>aa </option><option disabled= "Disabled" >bb</option><option>cc</option> </ Select></form>Case two: How to adjust the width of select?
Answer: You can add a style style to the Select tab
<style>.s1{width:200px;} </style><select class= "S1" > <OPTION> Long and long can also display </OPTION> <OPTION> long and long can also display </OPTION></select>The above is the whole content of this article, have any questions welcome to ask questions below.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
