JS CSS Tutorial to beautify the Select Code, is the use of CSS div to imitate the Select option Oh, this method is said below, well crap not say much.
<!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" >
<head>
<meta http-equiv= "Content-type" content= "HTML; charset=gb2312 "/>
<title>js CSS Landscaping Select code by http://www.jzread.com</title>
<script type= "text/web Effects" src= "Mselect.js" ></script>
<script type= "Text/javascript" >
/*
First of all, this JS support sliding expansion, the original Drop-down onchange event, selected/disabled properties,
Support up and down key selection, support the form reset, it should be said that there are some?
Then, the author is angusyoung,2010-4-10
*/
var myselect=new mselect (' Myselect ', ' mselect.css ');
window.onload= function () {
var as=document.getelementsbytagname (' select ');
for (var i=0;i<as.length;i++) {
switch (As[i].getattribute (' msty ')) {
case ' redline ':
myselect.create (As[i], ' redline ');
break;
case ' bluecircle ':
myselect.create (as[i], ' bluecircle ', true);
break;
case ' orangeheart ':
myselect.create (as[i], ' Orangeheart ', true);
break;
}
}
}
</script>
</head>
<body style= "Text-align:center;background-color: #cfdfef"
<h2> to play the formal, submit the form! </h2>
<form name= "Goodjob" action= "method=" get "onreset=" alert (' Ha, do it. '); "
<p> Fill in your name: <input name= "testname" type= "text"/></P>
<p> Select your gender:
<select Name= "Sexy" msty= "Orangeheart"
<option> confidential </option>
<option value= "0" > Female </option>
<option value= "1" > Male </option>
</select>
</p>
<p> Select your address:
<select name= "addr" msty= bluecircle "onchange=" alert (' Your chosen address is ' +this.options[this.selectedindex '). Text+ ' right? ');"
<option> mars </option>
<option value= "GZ" > Guangzhou </option>
< Option value= "sz" selected= "selected" > Shenzhen </option>
<option value= "St" > Shantou </option>
<option value= "" disabled= "disabled" > not optional </option>
<option value= "DG" > Dongguan </ OptiOn>
<option value= "en" > Zhuhai </option>
</select>
</p>
<p> Choose your age:
<select name= "age" msty= "Redline"
<option value= "18-25" >18-25</OPTION>
<option value= "25-30" selected= "selected" >25-30</OPTION>
<option value= "30-40" >30-40 </option>
</select>
</p>
<p><button type= "Submit" > mention turn </button ><button type= "reset" > Reset </button></p>
</form>
<p> below is the form, not affected by the reset. </p>
<select name= "www" msty= "bluecircle"
<option> privacy </option>
< Option value= "0" > Female </option>
<option value= "1" > Male </option>
</select>
</body>
</html>
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
