zoukankan      html  css  js  c++  java
  • 纯css修改下拉列表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;
                }

    效果图:

    这里写图片描述

    孜孜不倦,必能求索;风尘仆仆,终有归途。
  • 相关阅读:
    .Net环境下的缓存技术介绍
    JavaScript 全局对象
    JavaScript escape() 函数
    实现DIV拖动
    巧用Ajax的beforeSend 提高用户体验
    js中ie8下不识别indexOf的解决办法
    页面弹窗效果HTML
    让html页面中的文字不可选中
    MVC路由规则
    C# Math.Round
  • 原文地址:https://www.cnblogs.com/liyuspace/p/9145814.html
Copyright © 2011-2022 走看看