php下拉框css样式,css修改下拉列表select默认样式的实例

select的一些默认样式我们很难修改，比如图标的替换。接下来就说说如何修改这些默认样式，希望本文能帮助到大家。

给select添加父元素p目的是为了，用p的样式覆盖住select样式。

css代码：p{

//用p的样式代替select的样式

width: 200px;

height: 40px;

border-radius: 5px;

//盒子阴影修饰作用,自己随意

box-shadow: 0 0 5px #ccc;

position: relative;

}

select{

//清除select的边框样式

border: none;

//清除select聚焦时候的边框颜色

outline: none;

//将select的宽高等于p的宽高

width: 100%;

height: 40px;

line-height: 40px;

//隐藏select的下拉图标

appearance: none;

-webkit-appearance: none;

-moz-appearance: none;

//通过padding-left的值让文字居中

padding-left: 60px;

}

//使用伪类给select添加自己想用的图标

p:after{

content: "";

width: 14px;

height: 8px;

background: url(img/xiala.png) no-repeat center;

//通过定位将图标放在合适的位置

position: absolute;

right: 20px;

top: 45%;

//给自定义的图标实现点击下来功能

pointer-events: none;

}

select的一些默认样式我们很难修改，比如图标的替换。接下来就说说如何修改这些默认样式：

html代码：

相关推荐：