HTML/CSS -删除/重新着色下拉选项的边框

goucqfw6 于 2022-12-24 发布在其他

关注(0)|答案(3)|浏览(167)

select {
  width: 300px;
  font-family: inherit;
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 10px;  
  padding-right: 30px;
  display:block;
  color: #999;
  border: none;
  border-bottom: 1px solid #757575;
}
*:focus {
outline: #757575;
}
 
select:focus {outline:0;}

<select class="weekselection">
  <option value="" disabled selected>Choose the weekday</option>
  <option value="0">Monday</option>
  <option value="1">Tuesday</option>
  <option value="2">Wednesday</option>
  <option value="3">Thursday</option>
  <option value="4">Friday</option>
  <option value="5">Saturday</option>
  <option value="6">Sunday</option>
</select>

我想删除或更改下拉菜单的颜色：

箭头标记的蓝色东西。我试过

select {
  border: none;
}

*:focus {
outline: #757575;
}

select:focus {outline:0;}

但是它仍然留在那里，我怎么才能把它移走呢？谢谢!
超文本：

<select class="weekselection">
    <option value="" disabled selected>Choose the weekday</option>
    <option value="0">Monday</option>
    <option value="1">Tuesday</option>
    <option value="2">Wednesday</option>
    <option value="3">Thursday</option>
    <option value="4">Friday</option>
    <option value="5">Saturday</option>
    <option value="6">Sunday</option>
</select>

css

来源：https://stackoverflow.com/questions/42550029/html-css-remove-recolor-border-of-dropdown-options

3条答案

按热度按时间

nfzehxib1#

答案是：你不能因为css不能修改选项样式.
但是你可以使用一个列表，让它看起来像一个下拉列表，这样你就可以自由地设计它的风格了：

演示

$("ul li").slideUp();
$("label").click(function () {
    $("ul li").slideToggle();
});
$("ul li").click(function () {
    $("label").text($(this).text());
    $("ul li").slideToggle();
});

ul {
  display: table;
  list-style: none;
  padding: 0;
}

ul li {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>One</label>
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

赞(0）回复(0）举报 2022-12-24

tcomlyy62#

我引述另一个类似的问题：
选择的下拉菜单是ShadowDOM的一部分。在当前的CSS规范中，第3级，没有办法定位大多数ShadowDOM元素。你可以在这里阅读ShadowDOM的规范，尽管那里没有太多关于你想要的东西。
Chrome有一些专有的选择器来改变一些shadowDOM元素，但不是全部。Firefox甚至更少（据我所知），Opera一个也没有。IE可能也一样糟糕，甚至更糟。
考虑到兼容性，最好的办法是使用一个Jquery插件，如果你真的想给select设置样式，那么可以使用其他HTML元素来模拟select。
Select menu option border none

赞(0）回复(0）举报 2022-12-24

00jrzges3#

我认为“！important”将帮助您解决问题。

select {
     border: none !important;
     }

赞(0）回复(0）举报 2022-12-24

我来回答

HTML/CSS -删除/重新着色下拉选项的边框

3条答案

演示

相关问题

热门标签

最新问答