如何样式选择选项？ [复制]

Question

我想知道是否有办法让下拉框背景颜色消失。到目前为止，我有实际的第一部分，如果它说“租赁选择滑雪板类型”，那部分是透明的。但是当他们点击向下箭头时，选项的背景颜色是灰色的。我希望它在那里什么都没有。

我还想知道如何在单击箭头时消除选项周围的蓝色，所以从来没有蓝色。

HTML：

<select name="cars" class="select" id="name" autocomplete="off" placeholder="Type of ski" >
    <option value="" disabled selected hidden>Please Select Type Of Skis. . . . . . .</option>
    <option value="0">a</option>
    <option value="1">b</option>
</select>

CSS：

body {
  background-image: url(http://iliketowastemytime.com/sites/default/files/imagecache/blog_image/hd-wallpaper-winter-mountains-scene.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  font: 16px/26px "Raleway", sans-serif;
  text-align: center;
}

select {
  font: 16px/26px "Raleway", sans-serif;
  background: transparent;
  color: white;
  border: 0;
}

select option {
  margin: 40px;
  color: Red;
  border: 0;
  background-color: transparent;
  -webkit-appearance: none;
}

小提琴链接：Link

Answer 1

我认为没有办法使用 CSS 来实现，您必须隐藏选择，用列表复制它，然后复制功能。

这需要大量清理，但应该可以帮助您开始：

https://jsfiddle.net/94mb53mj/

$(function() {
  var options = $("select option").map(function() {
    return $("<li style='display: none' data-value='" + $(this).attr('value') + "'>" + $(this).text() + "</li>")
  }).get();
  var $ul = $("<ul></ul>");
  $ul.append(options)
  $("select").hide().after($ul)
  $("li").first().show().on("click", function() {
    $(this).siblings().toggle();
  }).siblings().on("click", function() {
    $("select").val($(this).data("value"));
    $("li").first().html($(this).html()).siblings().toggle();
  });
})

Answer 2

据我所知，您正在寻找的内容无法通过内置 CSS 完成。选择的 CSS 可以更改，但选择选项的 CSS 自定义仅限于背景颜色和颜色，可能还有更多。这是因为选项的样式是由浏览器处理的。

但一如既往，您可以使用模拟选择框的 jquery 插件。然后疯狂地定制。