html - 选择框箭头样式

Question

我想让第二个选择框箭头与第一个相同。但我不知道为什么它们不同，因为我没有设计箭头。

Answer 1

在大多数情况下，浏览器和操作系统决定了选择框的样式，仅使用 CSS 几乎不可能改变它们。您将不得不研究替换方法。主要技巧是应用appearance: none它可以让您覆盖一些样式。

我最喜欢的方法是这个：

http://cssdeck.com/item/265/styling-select-box-with-css3

它不会取代操作系统选择菜单 UI 元素，因此与此操作相关的所有问题都不存在（无法以长列表为主的浏览器窗口中断）。

祝你好运 ：）

Answer 2

您可以使用jQuery 选择框替换。这是一个 jQuery 插件。

http://cssglobe.com/post/8802/custom-styling-of-the-select-elements

纯 CSS http://bavotasan.com/2011/style-select-box-using-only-css/

Answer 3

对于使用 ie8 并且不想使用插件的任何 1，我制作了一些受 Rohit Azad 和 Bacotasan 博客启发的东西，我只是使用 JS 添加了一个跨度来显示所选值。

的HTML：

<div class="styled-select">
   <select>
      <option>Here is the first option</option>
      <option>The second option</option>
   </select>
   <span>Here is the first option</span>
</div>

css（我只为 BG 使用了一个箭头，但你可以放置一个完整的图像并放弃定位）：

.styled-select div
{
    display:inline-block;
    border: 1px solid darkgray;
    width:100px;
    background:url("/Style Library/Nifgashim/Images/drop_arrrow.png") no-repeat 10px 10px;
    position:relative;
}

.styled-select div select
{
    height: 30px;
    width: 100px;
    font-size:14px;
    font-family:ariel;

    -moz-opacity: 0.00;
    opacity: .00;
    filter: alpha(opacity=00);
}

.styled-select div span
{
    position: absolute;
    right: 10px;
    top: 6px;
    z-index: -5;
}

js：

$(".styled-select select").change(function(e){
     $(".styled-select span").html($(".styled-select select").val());
});

Answer 4

选择框箭头是本机 ui 元素，它取决于桌面主题或 Web 浏览器。使用 jQuery 插件（例如Select2、Chosen）或 CSS。

Answer 5

在 Firefox 39 中，我发现为选择元素设置边框会将箭头呈现为 (2)。未设置边框，将箭头呈现为 (1)。我认为这是一个错误。

Answer 6

http://jsfiddle.net/u3cybk2q/2/ 检查 windows、iOS 和 Android（iexplorer 补丁）

.styled-select select {
   background: transparent;
   width: 240px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
}
.styled-select {
   width: 240px;
   height: 34px;
   overflow: visible;
   background: url(http://nightly.enyojs.com/latest/lib/moonstone/dist/moonstone/images/caret-black-small-down-icon.png) no-repeat right #FFF;
   border: 1px solid #ccc;
}
.styled-select select::-ms-expand {
    display: none;
}

<div class="styled-select">
   <select>
      <option>Here is the first option</option>
      <option>The second option</option>
   </select>
</div>