Code
2023-03-20 09:00:04

如何仅使用CSS设置＜select＞下拉列表的样式？

是否有CSS唯一的方式来设置＜select＞下拉列表的样式？

我需要尽可能人性化地设置＜select＞表单的样式，而不需要任何JavaScript。在CSS中，我可以使用哪些财产来执行此操作？

此代码需要与所有主要浏览器兼容：

Internet Explorer 6、7和8Firefox浏览器游猎

我知道我可以用JavaScript实现：示例。

我说的不是简单的造型。我想知道，我们只能用CSS做什么。

我在Stack Overflow上发现了类似的问题。

还有Doctype.com上的这个。

当前回答

您还可以向下拉列表中添加悬停样式。

选择｛position:relative；float:left；width:21.4%；height:34px；background:#f9f9e0；border:1px solid#41533f；padding:0px 10px 0px 10px；color:#41533f；margin:-10px 0px 0px 20px；backbackground:透明；字体大小：12px；-webkit外观：无；-moz外观：无(https://alt-fit.com/images/global/select-button.png)100%/15%无重复选择：悬停｛background:url(https://alt-fit.com/images/global/select-button.png)100%/15%无重复#fff；}<html><head></head><body><select name=“type”class=“select”><option style=“color:#41533f；”value=“select option”>选择选项</option><option value=“选项1”>选项1</option><option value=“option 2”>选项2</option><option value=“选项3”>选项3</option></选择></body></html>

2017-12-02 11:02:53

其他回答

仅限CSS和HTML的解决方案

它似乎与Chrome、Firefox和Internet Explorer 11兼容。但请留下您对其他网络浏览器的反馈。

正如Danield的回答所建议的那样，我将我的选择包装在一个div中（甚至两个div用于x浏览器兼容性），以获得预期的行为。

看见http://jsfiddle.net/bjap2/

HTML格式：

<div class="sort-options-wrapper">
    <div class="sort-options-wrapper-2">
        <select class="sort-options">
                <option value="choiceOne">choiceOne</option>
                <option value="choiceOne">choiceThree</option>
                <option value="choiceOne">choiceFour</option>
                <option value="choiceFiveLongTestPurpose">choiceFiveLongTestPurpose</option>
        </select>
    </div>
    <div class="search-select-arrow-down"></div>
</div>

注意两个div包装器。

还请注意，添加了额外的div以将箭头向下按钮放置在您喜欢的位置（绝对位置），这里我们将其放在左侧。

CSS

.sort-options-wrapper {
    display: inline-block;
    position: relative;
    border: 1px solid #83837F;
}

/* This second wrapper is needed for x-browser compatibility */
.sort-options-wrapper-2 {
    overflow: hidden;
}

select {
    margin-right: -19px; /* That's what is hiding the default-provided browser arrow */
    padding-left: 13px;
    margin-left: 0;
    border: none;
    background: none;

    /* margin-top & margin-bottom must be set since some
       browsers have default values for select elements */
    margin-bottom: 1px;
    margin-top: 1px;
}

select:focus {
    outline: none; /* Removing default browsers outline on focus */
}
.search-select-arrow-down {
    position: absolute;
    height: 10px;
    width: 12px;
    background: url(http://i.imgur.com/pHIYN06.png) scroll no-repeat 2px 0px;
    left: 1px;
    top: 5px;
}
2014-02-07 08:47:55

Danield回答中的第三种方法可以改进，以处理悬停效果和其他鼠标事件。只需确保“button”元素正好位于标记中的select元素之后。然后使用+CSS选择器将其作为目标：

HTML格式：

<select class="select-input">...</select>
<div class="select-button"></div>

CSS:

.select-input:hover+.select-button {
    <Hover styles here>
}

然而，当悬停在select元素上的任何位置时，这将显示悬停效果，而不仅仅是“按钮”上。

我将此方法与Angular结合使用（因为我的项目恰好是Angular应用程序），以覆盖整个select元素，并让Angular在“button”-元素中显示所选选项的文本。在这种情况下，将鼠标悬停在所选对象上的任何位置时，悬停效果都是非常合理的。

如果没有JavaScript，它就无法工作，所以如果您想这样做，并且您的站点必须在没有JavaScript的情况下工作，那么您应该确保您的脚本添加了增强所需的元素和类。这样，没有JavaScript的浏览器只会得到一个正常的、未样式的select，而不是一个无法正确更新的样式徽章。

2014-09-04 08:48:25

自定义选择CSS样式

在Internet Explorer（10和11）、Edge、Firefox和Chrome中测试

select：：-ms扩展{显示：无；}选择{显示：内联块；框大小调整：边框框；衬垫：0.5em 2em 0.5em 0.5em；边框：1px实心#eee；字体：inherit；线条高度：inherit；-webkit外观：无；-moz外观：无；-ms外观：无；外观：无；背景重复：无重复；背景图像：线性梯度（45deg，透明50%，currentColor 50%），线性梯度（135deg，当前Color 50%，透明50%）；背景位置：右15px顶部1em，右10px顶部1nm；背景尺寸：5px 5px，5px 5px；}<select name=“”><option value=“”>Lorem</option><option value=“”>Lorem Ipsum</option></选择><select name=“”已禁用><option value=“”>禁用</option></选择><select name=“”style=“color:red；”><option value=“”>颜色</选项><option value=“”>Lorem Ipsum</option></选择>

2019-06-12 11:20:38

一个使用：after和：before来完成这个技巧的非常好的例子是在使用CSS3 | CSSDeck设置选择框的样式中

2013-04-28 11:31:34

使用clip属性裁剪选择元素的边框和箭头，然后将自己的替换样式添加到包装中：

<!DOCTYPE html><html><head><style>选择｛位置：绝对；剪辑：矩形（2px 49px 19px 2px）；z索引：2；｝body＞span｛display：块；位置：相对；宽度：64px；高度：21px；边框：2px纯绿色；背景：url(http://www.stackoverflow.com/favicon.ico)右1px不重复；}</style></head><span><选择><option value=“”>Alpha</option><option value=“”>Beta版</option><option value=“”>Charlie</option></选择></span></html>

使用不透明度为零的第二次选择使按钮可单击：

<!DOCTYPE html><html><head><style>#实{位置：绝对；剪辑：矩形（2px 51px 19px 2px）；z索引：2；}#假｛位置：绝对；不透明度：0；｝body>span｛display：块；位置：相对；宽度：64px；高度：21px；背景：url(http://www.stackoverflow.com/favicon.ico)右1px不重复；}</style></head><span><select id=“real”><option value=“”>Alpha</option><option value=“”>Beta版</option><option value=“”>Charlie</option></选择><select id=“fake”><option value=“”>Alpha</option><option value=“”>Beta版</option><option value=“”>Charlie</option></选择></span></html>

Webkit和其他浏览器的坐标不同，但@media查询可以涵盖这一点。

工具书类

Dojo FX测试：dojox.FX.ext-Dojo.complexCSS掩码：使用rect函数测试剪辑属性，并自动将值剪辑到边框框

2012-01-07 01:33:08

推荐文章

aliyun

最新文章

标签

2025 code 京ICP备15047053号-1