纯css修改下拉列表select的默认样式

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



html代码:

<div>
    <select name="">
        <option value="芝士">芝士</option>
        <option value="奶油">奶油</option>
    </select>
</div>

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

css代码:

            div{
                //用div的样式代替select的样式
                width: 200px;
                height: 40px;
                border-radius: 5px;
                //盒子阴影修饰作用,自己随意
                box-shadow: 0 0 5px #ccc;
                position: relative;
            }
            select{
                //清除select的边框样式
                border: none;
                //清除select聚焦时候的边框颜色
                outline: none;
                //将select的宽高等于div的宽高
                width: 100%;
                height: 40px;
                line-height: 40px;
                //隐藏select的下拉图标
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                //通过padding-left的值让文字居中
                padding-left: 60px;
            }
            //使用伪类给select添加自己想用的图标
            div:after{
                content: "";
                width: 14px;
                height: 8px;
                background: url(img/xiala.png) no-repeat center;
                //通过定位将图标放在合适的位置
                position: absolute;
                right: 20px;
                top: 45%;
                //给自定义的图标实现点击下来功能
                pointer-events: none;
            }

原文地址:https://www.cnblogs.com/yaoyuqian/p/8546079.html

时间: 2024-10-09 07:10:10

纯css修改下拉列表select的默认样式的相关文章

用纯css改变下拉列表select框的默认样式(转)

用纯css改变下拉列表select框的默认样式 分享到 分类 JS学习   关键字 前端   发布 kris  2015-04-01 注意 转载须保留原文链接,译文链接,作者译者等信息. 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计. 一切看起来很好,很正常,直到你看到他/她设计的一个选择下拉框跟浏览器默认提供的样式有些不同!你说:“这没

用纯css改变下拉列表select框的默认样式(不兼容IE10以下)

在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计. 一切看起来很好,很正常,直到你看到他/她设计的一个选择下拉框跟浏览器默认提供的样式有些不同!你说:“这没办法做!你应该不会抱怨设计师,其实更改下拉输入的默认样式并不是非常难的! 下面是解决方案. 我们看到默认的下载选择框在firefox和chrome中是有些不同的 Chrome 和 Firefox 中分

[转载]用纯css改变下拉列表select框的默认样式

在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计. 一切看起来很好,很正常,直到你看到他/她设计的一个选择下拉框跟浏览器默认提供的样式有些不同!你说:“这没办法做!你应该不会抱怨设计师,其实更改下拉输入的默认样式并不是非常难的! Mobile 和现代浏览器的解决方案 下面是解决方案. 我们看到默认的下载选择框在firefox和chrome中是

用纯css改变下拉列表select框的默认样式

select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; /*清除箭头*/ -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("http://ourjs.github.io/static/2015/arrow.p

纯CSS修改checkbox复选框样式

借鉴网友博客, 改用后整理收录 效果图: 移入: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box_inner1{ width: 25px; margin: 20px 100px; /*最外层盒子的外边距, 可自己调*/ position:

css去除webkit内核的默认样式

做移动端的朋友应该知道,iphone的默认按钮是个很恶心的圆角,select下拉框也有默认样式无法修改. 这时候可以用到 -webkit-appearance:none //去除默认样 在按钮和select样式里加入上面css,效果如下图. css代码如下: input{ background:#FF9933; border-radius:5px; color:#fff; padding:3px 20px; -webkit-appearance:none; } select{ backgroun

怎么修改单选框radio默认样式

jQuery 实现下这个效果,因此不一定是最佳方案,背景图直接从网上找到.:)先把 HTML 码好: <div>   <input type="radio" id="nba" checked="checked" name="sport" value="nba">   <label name="nba" class="checked" fo

select框默认样式去除(ie中隐藏默认下拉图标)

html代码 1 <select class="info-select"> 2 <option selected="selected">1</option> 3 <option>2</option> 4 </select> css代码 /*清除ie的默认选择框样式清除,隐藏下拉箭头*/ select::-ms-expand { display: none; } .info-select{ wid

纯css修改单选、复选按钮样式

只支持IE9及以上 html <label><input class="radio" type="radio" name="radio1"/><span class="radio-style"></span>10</label> <label><input class="radio" type="checkbox&quo