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

作者：袖梨 2022-07-02

大家都见过用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部分：

 

 
 

相关文章

精彩推荐