Html 如何隐藏“选择框”的默认箭头并设置所需图像？_Html_Css

Html 如何隐藏“选择框”的默认箭头并设置所需图像？

html css

Html 如何隐藏“选择框”的默认箭头并设置所需图像？,html,css,Html,Css,我想做的只是隐藏HTML表单元素的选择框的默认箭头，并用我想要的箭头（图像）替换它。我尝试了很多东西，但我找不到在IE、Firefox、Chrome等浏览器上都适用的确切解决方案。。这是我在这个问题上的代码：因为没有人这样回答，这就是为什么我再次问，如果有人能给我一个干净的代码谢谢如果您认为问题不好或解释不好，请在评论中告诉我以下是演示：使用CSS和jQuery自定义选择框 .选择包装器{ 浮动：左；显示：内联块；边框：1px实心#d8d8；背景：url（“../images/

我想做的只是隐藏HTML表单元素的选择框的默认箭头，并用我想要的箭头（图像）替换它。我尝试了很多东西，但我找不到在IE、Firefox、Chrome等浏览器上都适用的确切解决方案。。这是我在这个问题上的代码：

因为没有人这样回答，这就是为什么我再次问，如果有人能给我一个干净的代码

谢谢

如果您认为问题不好或解释不好，请在评论中告诉我

以下是演示：


使用CSS和jQuery自定义选择框
.选择包装器{
浮动：左；
显示：内联块；
边框：1px实心#d8d8；
背景：url（“../images/dropdown.png”）无重复右中心；
光标：指针；
}
.选择包装，.选择包装选择{
宽度：200px；
高度：26px；
线高：26px；
}
。选择包装器：悬停{
背景：url（“../images/dropdown hover.png”）无重复右中心；
边框颜色：#239fdb；
}
.选择包装器.支架{
显示：块；
利润率：0.35px 0.5px；
空白：nowrap；
溢出：隐藏；
光标：指针；
位置：相对位置；
z指数：-1；
}
.选择包装器选择{
保证金：0；
位置：绝对位置；
z指数：2；
光标：指针；
大纲：无；
不透明度：0；
/*针对旧浏览器的CSS攻击*/
_noFocusLine：表达式（this.hideFocus=true）；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；
过滤器：alpha（不透明度=0）；
-khtml不透明度：0；
-moz不透明度：0；
}
/*让我们来美化我们的形式*/
形式{
利润率：20px；
}
输入[type=“submit”]{
浮动：左；
背景#d8d8d8；
边框：1px实心#C4C4；
左边距：10px；
填充：4px10px；
光标：指针；
大纲：无；
}
输入[type=“submit”]：悬停{
颜色：#fff；
边框颜色：#1b7aa9；
背景色：#239fdb；
}
$（文档）.ready（函数（）{
$（“.custom select”）.each（函数（）{
$（this.wrap（“”）；
$（此）。在（“”）之后；
});
$（“.custom select”）.change（函数（）{
var selectedOption=$（this.find（“：selected”）.text（）；
$（this）.next（“.holder”）.text（选择选项）；
}).触发（“变更”）；
})
你最喜欢的时间是什么：
挑选
驱动
互联网
电影
音乐
阅读
体育

哇，这个问题有这么多糟糕的答案。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Custom Select Box with CSS and jQuery</title>
<style type="text/css">
    .select-wrapper{
        float: left;
        display: inline-block;
        border: 1px solid #d8d8d8;            
        background: url("../images/dropdown.png") no-repeat right center;
        cursor: pointer;
    }
    .select-wrapper, .select-wrapper select{
        width: 200px;
        height: 26px;
        line-height: 26px;
    }
    .select-wrapper:hover{
        background: url("../images/dropdown-hover.png") no-repeat right center;
        border-color: #239fdb;
    }
    .select-wrapper .holder{
        display: block;
        margin: 0 35px 0 5px;
        white-space: nowrap;            
        overflow: hidden;
        cursor: pointer;
        position: relative;
        z-index: -1;
    }
    .select-wrapper select{
        margin: 0;
        position: absolute;
        z-index: 2;            
        cursor: pointer;
        outline: none;
        opacity: 0;
        /* CSS hacks for older browsers */
        _noFocusLine: expression(this.hideFocus=true); 
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -khtml-opacity: 0;
        -moz-opacity: 0;
    }

    /* Let's Beautify Our Form */
    form{
        margin: 20px;
    }
    input[type="submit"]{
        float: left;
        background: #d8d8d8;
        border: 1px solid #c4c4c4;
        margin-left: 10px;
        padding: 4px 10px;
        cursor: pointer;
        outline: none;
    }
    input[type="submit"]:hover{
        color: #fff;
        border-color: #1b7aa9;
        background-color: #239fdb;
    }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".custom-select").each(function(){
            $(this).wrap("<span class='select-wrapper'></span>");
            $(this).after("<span class='holder'></span>");
        });
        $(".custom-select").change(function(){
            var selectedOption = $(this).find(":selected").text();
            $(this).next(".holder").text(selectedOption);
        }).trigger('change');
    })
</script>
</head>
<body>
    <form action="../faq/select-action.php" method="post">
        <p>What Is Your Favourite Time Pass:</p>        
        <select name="timepass" class="custom-select">
            <option>Select</option>
            <option>Driving</option>
            <option>Internet</option>
            <option>Movie</option>
            <option>Music</option>
            <option>Reading</option>
            <option>Sports</option>                
        </select>
        <input type="submit" value="Submit">
    </form>
</body>
</html>