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

Posted 2023-03-05

【中文标题】如何样式选择选项？ [复制]

【英文标题】：How to style select option? [duplicate]

【发布时间】：2018-03-04 14:55:57

【问题描述】：

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

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

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

【参考方案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();
  );
)

【参考方案2】：

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

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

【讨论】：

点击后有没有办法摆脱蓝色？

你的意思是选择时选择的蓝色边框还是选择选项的背景？

选择选项周围的蓝色边框，所以当您单击箭头时，会出现 drtop down 框

啊排序了：0谢谢x

我怎么知道您可以更改 Windows 上某些浏览器中选项的背景。但在 macOS 中，您将始终拥有标准的选择视图。这就是为什么我认为更好的方式让你选择像 select2.org 这样的一些 js 或 jquery 插件。如果你不想使用 js 并且想要风格化的选择，你可以做这样的事情。但这不是一个好主意；）codepen.io/n1ghtman/pen/KrRgQp