logo标签列表

如何使用CSS样式化<select>下拉菜单？

htmlcsscomboboxcross-browserskinning
1638

有没有一种仅使用CSS的方法来样式化元素，而不使用任何JavaScript。在CSS中，有哪些属性可以用来实现这个需求？

这段代码需要兼容所有主流浏览器：

  • Internet Explorer 6、7和8
  • Firefox
  • Safari

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

但是我并不是要简单的样式设置。我想知道如何在仅使用CSS的情况下最大限度地进行样式定制。

在Stack Overflow上，我找到了类似的问题。

还有在Doctype.com上找到了这个。

74
我认为这是一个合理的问题，但答案是“不太”或“不是你想要的方式”。但是没有人（包括我）对此完全确定，这种模糊感在读者心中潜伏，进而质疑问题的合理性。 - ZJR
1
@Jitendra，我知道你的意思。如果您能更明确地提出问题，我们会很高兴。此外，我认为我找到了您可能正在寻找的内容。这是实验性的，但请查看：http://cappuccino.org/aristo/showcase/ - jeremyosborne
1
@jeremyosborne - 感谢您的回复。我知道我可以用JavaScript做到这一点。您提供的示例链接是基于JS的。我之所以问这个问题，是因为我想知道，有没有人知道我们只能使用CSS做什么最好的事情。 - Jitendra Vyas
1
@Jitendra 感谢您更新问题。在您的限制条件下（仅使用CSS和无JS），您可以可靠地进行以下修改：字体，背景和前景（文本）颜色，边框大小，外观和颜色，位置以及大小（通常通过字体设置）。即使如此，您可能还需要进行一些微调，以确保所有浏览器中的显示效果相同。我希望我知道比这更好的答案，也许我错过了一个，但我不认为有。 - jeremyosborne
但是没有人（包括我）对此有100％的把握，这就是为什么这是一个很好的问题！我们应该确信像这样的事情。它们是基础。 - Stijn de Witt
25个回答
4
4
4

您还可以为下拉菜单添加悬停样式。

select {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; background: transparent; font-size: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #f9f9e0;}
select:hover {background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #fff;}
<html>
<head>
</head>
<body>
<select name="type" class="select"><option style="color:#41533f;" value="Select option">Select option</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</body>
</html>

完美的答案。 - Muhammad Ali
3

仅使用CSS和HTML的解决方案

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

如Danield的回答所建议的，我将选择框包裹在一个div中（甚至为了跨浏览器兼容性而使用两个div），以获得预期的行为。

请查看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;
}
1

纯CSS跨浏览器选择控件样式

规则#1： 永远不要使用JavaScript来为HTML元素设置样式！

如果禁用或阻止了JS，你的CSS会崩溃。始终从纯CSS开始，然后再添加任何额外的“脚本粘合剂”。记住！像HTML中的所有表单字段一样，<select>控件是替换元素，这意味着设备上的浏览器和操作系统对控件的设计和布局有一定的控制。这就是为什么Windows、Apple和移动设备的控件看起来都不同！这是有原因的。

不要通过JavaScript或CSS黑客攻击控件设计，除非你觉得必须修改UI（比如删除选择控件上的箭头）。下面的CSS并没有这样做。它接受了在选择表单控件中可以重新设计的核心限制。我仍然会从我的清洁CSS解决方案开始，然后在其上添加任何自定义的“黑客”。“黑客”如果失败，那么你的CSS将优雅地退回到一个全局CSS设计，它在20多年的浏览器中始终有效...以及未来的浏览器！

下面的CSS代码可以跨浏览器（从1990年代到现在）工作，并将所有浏览器，过去和现在，对齐到相同的基本CSS设计。你可以根据需要自定义此代码。你可以在非常旧的浏览器中测试它，它应该给你一个与现代HTML5浏览器匹配的不错的外观和感觉，这应该是目标。

/* This CSS works in 20+ years of browsers without hacks, scripts, or tricks. */

body optgroup,
body optgroup:visited,
body optgroup:hover,
body optgroup:focus,
body optgroup:active {
    margin: 0;
    padding: 0;
    font-style: inherit;
    font-weight: bold;
    cursor: pointer;
    background: #fff;
    border: none;
}

body optgroup:visited,
body optgroup:hover,
body optgroup:focus,
body optgroup:active {
    background: #f9f9ff;
}

body option,
body option:visited,
body option:hover,
body option:focus,
body option:active {
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: #fff;
    border: none;
}
body option:visited,
body option:hover,
body option:focus,
body option:active {
    background: #f9f9ff;
}

body select,
body select:visited,
body select:hover,
body select:focus,
body select:active {
    display: inline-block;
    width: auto;
    height: auto;
    min-width: 0;
    max-width: none;
    padding: .17em .17em;
    margin: 0;
    text-transform: none;
    border-radius: .2em;
    border: 2px solid #bbb;
    background: #fff;
    cursor: pointer;
    -webkit-appearance: listbox;
    -moz-appearance: listbox;
    line-height: normal;
}

body select:visited,
body select:hover,
body select:focus,
body select:active {
    background: #f9f9ff;
    border: 2px solid #999;
}
body select:focus {
    background: #fff;
    border: 2px solid #999;
}

body select:required:visited:valid,
body select:required:valid {
    background: #fff;
    border: 2px solid #7fbe96;
}

body select:required:hover:valid {
    background: #f9f9ff;
    border: 2px solid #278b3d;
}

body select:required:focus:valid {
    background: #fff;
    border: 2px solid #278b3d;
}

body select:required:visited:invalid,
body select:required:invalid {
    background: #fff;
    border: 2px solid #ff6565;
}

body select:required:hover:invalid {
    background: #f9f9ff;
    border: 2px solid #ce2f2f;
}

body select:required:focus:invalid {
    background: #fff;
    border: 2px solid #ce2f2f;
}

body select[disabled],
body select[readonly],
body select[disabled="disabled"],
body select[readonly="readonly"],
body select[disabled]:visited,
body select[readonly]:visited,
body select[disabled="disabled"]:visited,
body select[readonly="readonly"]:visited,
body select[disabled]:hover,
body select[readonly]:hover,
body select[disabled="disabled"]:hover,
body select[readonly="readonly"]:hover,
body select[disabled]:focus,
body select[readonly]:focus,
body select[disabled="disabled"]:focus,
body select[readonly="readonly"]:focus,
body select[disabled]:active,
body select[readonly]:active,
body select[disabled="disabled"]:active,
body select[readonly="readonly"]:active {
    border: 2px solid #bbb;
    background: #f0f0f0;
    color: #999;
    cursor: default !important;
}
4
规则 #2：见规则 #1。 - RockPaperLz- Mask it or Casket
...不要谈论《搏击俱乐部》 :) - Stokely
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接