select自定义下拉箭头

最新推荐文章于 2024-04-02 15:14:09 发布

coder丶东

最新推荐文章于 2024-04-02 15:14:09 发布

阅读量4.3k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/github_37710255/article/details/78076301

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

现场还原

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

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>select修改下拉按钮</title>
</head>
<body>
   <select name="" id="">
       <option value="aaa">aaa</option>
       <option value="bbb">bbb</option>
       <option value="ccc">ccc</option>
       <option value="ddd">ddd</option>
       <option value="eee">eee</option>
   </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>

coder丶东

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
select自定义下拉箭头

现场还原在HTML5开发APP应用的过程中，有些表单页面需要用到select标签，开发的时候用的安卓手机测试，样式的显示非常完美，但一用苹果手机测试，select的下拉箭头就不会显示。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>select修改下拉按钮</title></head><bod
复制链接

扫一扫

专栏目录