CSS：改变select、option标签的默认样式

最新推荐文章于 2024-03-07 18:27:41 发布

程小秋

最新推荐文章于 2024-03-07 18:27:41 发布

阅读量5.3w

点赞数 2

分类专栏： CSS3

本文链接：https://blog.csdn.net/golden_wheat/article/details/66479404

版权

CSS3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

CSS：select标签、option标签

select标签和option标签是自带有CSS样式的

1、用纯CSS方式去除默认的select标签样式

方法一：

form select{
	appearance:none;
	-moz-appearance:none; 
	-webkit-appearance:none;  
}
<form>
        <select>
            <option>北京</option>
            <option>天津</option>
            <option>上海</option>
        </select>
    </form>

所有浏览器都不支持appearance属性

Firefox支持替代的-moz-appearance属性

Safari和Chrome支持替代的-weblit-appearance属性

方法二：IE浏览器不支持appearance属性

*{
	margin:0;
	padding:0;
}
#wrap{
    width: 100px;
    height: 30px;
    overflow: hidden;
}
#wrap select {
    width: 120px;
}
<div id="wrap">
        <select>
            <option>北京</option>
            <option>天津</option>
            <option>上海</option>
        </select>
</div>

可以在select框右边加上下拉图片

2、用纯CSS方式去除option的默认样式：本来想用纯CSS方式去除option的默认样式，但没有找到这种方法。

3、也可以用div、ul、li、等标签来创建select标签、option标签，这样可以定义自己想要的样式。