123456selection{appearance:none;-moz-appearance: none; /* Firefox */-webkit-appearance:none; /* Safari 和 Chrome */}可以用appearance去掉默认样式，然后你就能随便搞了。
网站的建设创新互联建站专注网站定制,经验丰富,不做模板,主营网站定制开发.小程序定制开发,H5页面制作!给你焕然一新的设计体验!已为成都门帘等企业提供专业服务。
可以使用HTML5 list 属性。list 属性需要应用到 input 框上，然后内容写一个自定义的 id
然后在任意位置放一对 datalist 标签，并给 datalist 框一个 id，和 list 属性指向的 id 一致即可。
在 datalist 标签下放列表项，每个列表项用 option 元标签来表示，option 标签里用 value 属性填写内容，label 属性来做提示。
下面是示例代码：
form action=""
input type="text" list="url_list" name="text" /
input type="submit" /
/form
datalist id="url_list"
option label="HZ赫兹工作室" value="" /
option label="提示1" value="列表项1" /
option label="提示2" value="列表项2" /
option label="" value="列表项3" /
/datalist
HTML5之前一般使用select标签或者div+js实现
设置下拉列表框的默认值:使用关键字selected
select
name
=
"pronvince"
option
value
="sh"上海
option
value
="bj"北京
option
value
="js"江苏
option
value
="hb"
selected="selected"湖北
option
value
="zj"浙江
如果希望设置默认值，在option
的标签里加入:selected
=
"selected"即在展示时，为默认值。
html
有一个selected属性，selected=‘true’时，即选中，selected=‘false’则未选中。在html5中则将selected=‘true’可以缩写为selected,因为selected=‘false’是默认属性，比如：
volvo
saab
opel
audi
那么第4个option就是被选中的元素。
HTML5+JavaScript+CSS3实现下拉列表以及折叠功能
[javascript] view plain copy
function show(id){
var d = $('#content'+id).css('display');
if(d == 'block'){
$('#content'+id).css('display','none');
$('#img'+id).attr('src','img/bottom.png');
}else if(d == 'none'){
$('.drop_down_content').each(function(){
$(this).css('display','none');
$('.drop_down_list img').attr('src','img/bottom.png');
});
$('#content'+id).css('display','block');
$('#img'+id).attr('src','img/top.png');
}
[html] view plain copy
div class="drop_down_list" onclick="show('1');"
asvg/a
img id="img1" src="img/top.png"/
/div
ul class="drop_down_content" id="content1" style="display:block;"
li姓名 a李雷/a/li
/ul
div class="drop_down_list" onclick="show('2');"
a动画/a
img id="img2" src="img/bottom.png"/
/div
ul class="drop_down_content" id="content2" style="display:none;"
li父亲 a李大宝/a/li
/ul
[css] view plain copy
ul{
list-style-type: none;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
-webkit-padding-after: 0px;
}
.drop_down_list{
width:100%;
height:44px;
border-bottom: 1px solid #D9D9D9;
}
.drop_down_list a{
display: inline-block;
height:44px;
width:100px;
background: url(../img/biaozhu.png) 0px 13px no-repeat;
background-size: 6px 20px;
padding-left: 25px;
padding-top: 12px;
color: #0085d0;
}
.drop_down_list img{
float: right;
height:15px;
margin: 15px 20px;
}
.drop_down_content a{
color: #AAAAAA;
display: inline-block;
float: right;
margin-right: 8%;
}
.drop_down_content li{
height:38px;
width:94%;
color: #353535;
margin-left: 3%;
margin-right: 3%;
padding-top: 15px;
padding-left: 20px;
border-bottom: 1px solid #D9D9D9;
}
1）、普通下拉列表菜单
html代码如下：
form action="" method="get"
label1、普通下拉列表菜单/label
select name=""
option value="0"DIVCSS5/option
option value="1"DIVCSS5/option
/select
/form
2）、跳转下拉列表菜单（如常见点击后跳转到选择网站）
常常一些网站做友情链接，与部门之间使用select下拉标签实现网址跳转。下面我们通过代码与案例接受select跳转菜单应用。
跳转菜单html代码如下：
form action="" method="get"
label2、跳转的下拉列表菜单/label
select name="jumpMenu" id="jumpMenu"
onchange="MM_jumpMenu('parent',this,0)"
option value=""Rothur/option
option value=""Rothur/option
/select
/form
实现跳转还需要在head标签内加入Js脚本动作代码：
script type="text/javascript" !-- function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0; } //-- /script
html5和普通的html文件没有差别，所以你可以选择html文件，然后把其头部修改为html5标准头即可（当前页面即是html5标准头）
