如何使用 CSS 和 jQuery 在 HTML 中创建自定义选择框

答案：使用 CSS `:selected` 伪类和 jQuery

如果您尝试使用 background 等 CSS 属性删除选择框下拉箭头，它将不行。这是选择框的默认行为，因为选择框是浏览器的原生部分，它们的视觉呈现取决于浏览器本身，这就是选择框在 Firefox、chrome、safari、IE 等不同浏览器上出现不同的原因。

在本教程中，我们将自定义选择框，使其在 CSS 和某种 jQuery 的帮助下在浏览器中保持一致。实际上，这里我们只会自定义选择框的下拉箭头部分，其余部分保持不变，因为我们还必须将这些选择框投入实际使用，因此我们必须牢记其他事情。

此解决方案易于在任何项目中实施，并且跨浏览器高度兼容，甚至可以在 Internet Explorer 7 中使用。此自定义选择框即使以简单的形式为您的网站提供独特的外观和感觉，但是您可以扩展此示例以创建完全自定义的选择盒子。

HTML 代码

像在常规 HTML 中一样使用 <select> 标记创建选择框并将其放置在任何位置，但不要忘记将类 .custom-select 添加到选择框，因为此解决方案依赖于 .custom-select 类来跟踪文档中应该自定义的所有选择框，并将其他选择框保留为默认显示。让我们看一下下面的例子：

示例

Try this code »

<form action="action.asp" 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>Sports</option>
    </select>
</form>

CSS 代码

我们试图用 CSS 做的是在 CSS opacity 属性的帮助下隐藏默认选择框，并显示 <span> 代替它们。

现在将以下样式规则放在 HTML 文档的 head 部分中。

示例

Try this code »

<style>
.select-wrapper{
    float: left;
    display: inline-block;
    border: 1px solid #d8d8d8;            
    background: url("arrow.png") no-repeat right center;
    cursor: pointer;
}
.select-wrapper, .select-wrapper select{
    width: 200px;
    height: 26px;
    line-height: 26px;
}
.select-wrapper:hover{
    background: url("arrow-hover.png") no-repeat right;
    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;
}
</style>

jQuery 代码

此 jQuery 代码将跟踪文档中具有类 .custom-select 的所有选择框，并在选择框周围添加更多 HTML 元素，以用我们的自定义下拉图像替换下拉箭头并显示选定的值。

此外，不要忘记在此脚本之前将 jQuery 包含在您的文档中。

示例

Try this code »

<script>
$(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>

提示： 如果浏览器禁用了 JavaScript，则会出现普通选择框，而不是自定义选择框。所以它不会以任何方式破坏你的代码。

下载源代码

FAQ 相关问题解答

以下是与此主题相关的更多常见问题解答：

如何使用 CSS 和 jQuery 在 HTML 中创建自定义选择框

答案：使用 CSS :selected 伪类和 jQuery

HTML 代码

示例

CSS 代码

示例

jQuery 代码

示例

FAQ 相关问题解答

关于我们

联系方式

互动工具

答案：使用 CSS `:selected` 伪类和 jQuery