自定义select 小三角

2018-10-23 03:05:18来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

把select小三角换成自己的图片

效果:

css样式:

<style>
        #my_select {
            display: flex;
            display: -webkit-flex;
            width: 120px;
            font-size: 24px;
            padding: 0 5px;
            margin: 20px auto;
            outline: none;
            border: 1px solid #00DD00;
            appearance: none;
            /* 兼容Chrome */
            -webkit-appearance: none;
            background: url(Images/xia.png) no-repeat right center;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            color: #FF5511;
        }
    </style>

HTML:

<body>
    <select name="" id="my_select">
        <option value="0">苹果</option>
        <option value="1">香蕉</option>
        <option value="2">橘子</option>
    </select>
</body>

  

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:css实现中间文字,两边横线效果

下一篇:自定义scoll样式