Question

大家好，我想知道是否有办法让下拉框背景颜色消失。到目前为止，我有实际的第一部分是它说＆＃34;租赁选择滑雪板类型＆＃34;那部分是透明的。但是当他们点击向下箭头时，选项的背景颜色是灰色的，我希望它没有任何东西。我还想知道如何在点击箭头时摆脱选项周围的蓝色，所以没有蓝色的东西。

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

Fiidle链接：Link

谢谢x

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插件。然后疯狂定制。

如何选择样式选项

2 个答案: