select自定义下拉箭头

现场还原

在HTML5开发APP应用的过程中,有些表单页面需要用到select标签,开发的时候用的安卓手机测试,样式的显示非常完美,但一用苹果手机测试,select的下拉箭头就不会显示。


<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>select修改下拉按钮title>
head>
<body>
   <select name="" id="">
       <option value="aaa">aaaoption>
       <option value="bbb">bbboption>
       <option value="ccc">cccoption>
       <option value="ddd">dddoption>
       <option value="eee">eeeoption>
   select>
body>
html>

解决方案

在考虑之后决定利用css中的背景图片的方式解决这个兼容问题,先将select的默认样式去除,然后将下拉箭头的图标设置到background中。

css代码

<style>
    select {
        /*Chrome和Firefox里面的边框是不一样的,重新覆盖一下*/
        border: solid 1px #000;
        /*很关键:将默认的select选择框样式清除*/
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        /*在选择框的最右侧中间显示下拉箭头图片*/
         background: url("下拉箭头图片")  right center no-repeat;
        /*为下拉小箭头留出一点位置,避免被文字覆盖*/
        padding-right: 20px;
    }
    /*清除ie的默认选择框样式清除,隐藏下拉箭头*/
    select::-ms-expand { display: none; }
style>

你可能感兴趣的:(css)