当前位置:编程学习 > html/css >>

DIV+CSS标准制作网页表单的select例子

大家都见过用CSS定义的各色的input按钮,但对于select却无法用定义input的简单方式来实现。下面提供另外一种css定义的方式来让你的select炫起来。
CSS部分:
.select * {
    margin: 0;
    padding: 0;
}
.select {
    border:1px solid #cccccc;
    float: left;
    display: inline;
    }
.select div {
    border:1px solid #f9f9f9;
    float: left;
}
/* 子选择器,在FF等非IE浏览器中识别 */
.select>div {
    width:120px;
    height: 17px;
    overflow:hidden;
    }
    
/* 通配选择符,只在IE浏览器中识别 */
* 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; //鼠标移上的效果
}
.select select>option {
    text-indent: 2px; //option在FF等非IE浏览器缩进2px
}
XHTML部分:
<div class="select">
 <div>
 <select>
    <option>网页教学网</option>
    <option>网页教学网</option>
    <option>网页教学网</option>
 </select>
 </div>
</div>
补充:Css教程,样式布局 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,