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

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

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

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

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

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

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

还有Doctype.com上的这个。


当前回答

你肯定应该像CSS中的样式选择、optgroup和选项那样做。在许多方面,背景色和颜色只是您通常需要的样式选项,而不是整个选择。

其他回答

<select>标签可以通过CSS进行样式设置,就像在浏览器中呈现的HTML页面上的任何其他HTML元素一样。下面是一个(过于简单)的示例,它将在页面上放置一个select元素,并将选项的文本呈现为蓝色。

示例HTML文件(选择Example.HTML):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Select Styling</title>
  <link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="cherry">Cherry</option>
</select>
</body>
</html>

示例CSS文件(selectExample.CSS):

/* All select elements on page */
select {
  position: relative;
}

/* Style by class. Effects the text of the contained options. */
.blueText {
  color: #0000FF;
}

/* Style by id. Effects position of the select drop down. */
#styledSelect {
  left: 100px;
}

我有这个确切的问题,除了我不能使用图像,而且不受浏览器支持的限制。这应该是“符合规范”,幸运的话,最终开始在各地工作。

它使用分层旋转的背景层来“剪切”下拉箭头,因为伪元素不适用于select元素。

编辑:在这个更新版本中,我使用了CSS变量和一个小型主题系统。

:根目录{--半径:2px;--baseFg:灰色;--baseBg:白色;--重音Fg:#006fc2;--重音Bg:#bae1ff;}.主题粉色{--半径:2米;--baseFg:#c70062;--baseBg:#ffe3f1;--重音Fg:#c70062;--重音Bg:#ffaad4;}.主题结构{--半径:0;--baseFg:白色;--baseBg:黑色;--accentFg:黑色;--accentBg:橙色;}选择{字体:400 12px/1.3无衬线;-webkit外观:无;外观:无;颜色:var(--baseFg);border:1px实体变量(--baseFg);线高:1;大纲:0;衬垫:0.65em 2.5em 0.55em 0.75em;边界半径:var(--radius);背景色:var(--baseBg);背景图像:线性梯度(var(--baseFg)、var(--baseFg)),线性梯度(-135度,透明50%,var(--accentBg)50%),线性梯度(-225度,透明50%,var(--accentBg)50%),线性梯度(var(--accentBg)42%,var(--accentFg)42%);背景重复:无重复,无重复,不重复,无反复;背景大小:1px 100%,20px 22px,20px 22 px,20px 100%;背景位置:右20px中心,右下,右下和右下;}选择:悬停{背景图像:线性梯度(var(--accentFg),线性梯度(-135度,透明50%,var(--accentFg)50%),线性梯度(-225度,透明50%,var(--accentFg)50%),线性梯度(var(--accentFg)42%,var(--accentBg)42%);}选择:活动{背景图像:线性梯度(var(--accentFg),线性梯度(-135度,透明50%,var(--accentFg)50%),线性梯度(-225度,透明50%,var(--accentFg)50%),线性梯度(var(--accentFg)42%,var(--accentBg)42%);颜色:var(--accentBg);边框颜色:var(--accentFg);背景色:var(--accentFg);}<选择><option>这么多选项</option><选项></选项></选择><select class=“主题粉色”><option>这么多选项</option><选项></选项></选择><select class=“主题构建”><option>这么多选项</option><选项></选项></选择>

select  {
    outline: 0;
    overflow: hidden;
    height: 30px;
    background: #2c343c;
    color: #747a80;
    border: #2c343c;
    padding: 5px 3px 5px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 10px;
}

select option {border: 1px solid #000; background: #010;}

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

选择{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>

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