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

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

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

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

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

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

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

还有Doctype.com上的这个。


当前回答

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

其他回答

博客文章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>

select元素及其下拉功能很难设置样式。

Chris Heilmann的select元素的风格属性证实了Ryan Dohery对第一个答案的评论:

“select元素是操作系统,而不是浏览器chrome。因此风格不可靠,尝试也不一定有意义无论如何"

本机解决方案

下面是一个简单的HTML/CSS示例:https://jsfiddle.net/dkellner/e1jdspvb/

诀窍:由于某种原因,当你给select标记一个size属性时,它会突然理解CSS。通常,此属性用于创建始终可见的固定高度列表,但作为一个副作用,您现在可以对其进行样式设置。因此,我们所做的只是给它一个大小,然后实现显示/隐藏机制,以返回下拉列表的感觉。

简约版,不像示例那样时尚,但更容易理解:

<style>

    .stylish > span {position:relative;}
    .stylish select {position:absolute;left:0px;transform:scaleY(0);transform-origin:top center;}
    .stylish.dropped-down select {transform:scaleY(1);}

</style>
...
<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
        <input   onclick  = "this.closest('div').classList.toggle('dropped-down');"><br>
        <select  onclick  = "this.closest('div').classList.remove('dropped-down');"
                 onchange = "this.closest('div').querySelector('input').value=this.value;"
                 size=9
        >
            <optgroup label="Fantasy"></optgroup>

            <option value="gandalf">  Gandalf       </option>
            <option value="harry">    Harry Potter  </option>
            <option value="jon">      Jon Snow      </option>

            ...                
            
        </select>
    </span>
</div>

附加说明

这实际上实现了一个可编辑的下拉列表;使用只读以避免编辑<optgroup>标记是空的(不是围绕选项标记),这样更具风格

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

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