是否有CSS唯一的方式来设置<select>下拉列表的样式?

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

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

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

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

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

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

还有Doctype.com上的这个。


当前回答

使用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函数测试剪辑属性,并自动将值剪辑到边框框

其他回答

对您可以通过标记名来设置任何HTML元素的样式,如下所示:

select {
  font-weight: bold;
}

当然,您也可以像其他任何元素一样使用CSS类来设置其样式:

<select class="important">
  <option>Important Option</option>
  <option>Another Important Option</option>
</select>

<style type="text/css">
  .important {
    font-weight: bold;
  }
</style>

博客文章HowtoCSS表单下拉样式没有JavaScript适合我,但在Opera中失败了:

选择{边框:0无;颜色:#FFFFFF;背景:透明;字体大小:20px;字号:粗体;填充:2px 10px;宽度:378px;*宽度:350px;*背景:#58B14C;}#主要选举{溢出:隐藏;宽度:350px;-moz边框半径:9px 9px 9px 9px;-webkit边框半径:9px 9px 9px 9px;边框半径:9px 9px 9px 9px;方框阴影:1px 1px 11px#3330033;background:url(“arrow.gif”)无重复滚动319px 5px#58B14C;}<div id=“mainselection”><选择><option>选择选项</option><option>选项1</option><option>选项2</option></选择></div>

仅限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;
}

在现代浏览器中,在CSS中设置<select>的样式相对轻松。外观方面:唯一棘手的部分是替换箭头(如果你想要的话)。下面是一个使用内联data:URI和纯文本SVG的解决方案:

选择{-moz外观:无;-webkit外观:无;外观:无;背景重复:无重复;背景尺寸:0.5em自动;背景位置:右0.25em中心;右侧填充:1em;backgroundimage:url(“data:image/svg+xml;charset=utf-8\<svg xmlns='http://www.w3.org/2000/svg'viewBox='0 0 60 40'>\<多边形点=',0 60,0 30,40'style='fill:black;'/>\</svg>“);}<选择><option>选项1</option><option>选项2</option></选择><select style=“font-size:2rem;”><option>选项1</option><option>选项2</option></选择>

其余的样式(边框、填充、颜色等)相当简单。

这适用于我刚刚尝试过的所有浏览器(Firefox 50、Chrome 55、Edge 38和Safari 10)。关于Firefox的一个注意事项是,如果你想在数据URI中使用#字符(例如,fill:#000),你需要转义它(fill:%23000)。

自定义选择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></选择>