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>

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

相关文章:

你感兴趣的文章:

标签云: