CSS 选择菜单选项边框无

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14056300/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:07:44  来源:igfitidea点击:

Select menu option border none

css

提问by

I am trying to change select optionborder but unable to do that, I have tried it many times but not find the proper solution. I have attached the screen shot .

我正在尝试更改select option边框但无法做到这一点,我已经尝试了很多次但没有找到合适的解决方案。我附上了屏幕截图。

enter image description here

在此处输入图片说明

<head>
  <style>
    select option {
      background:transparent;
      border:0;
    }
  </style>
</head>

<body>
  <select>
    <option>hello</option>
    <option>hello</option>
    <option>hello</option>
    <option>hello</option>
    <option>hello</option>
  </select>
</body>

采纳答案by jamesplease

The dropdown of a select is part of what's called the ShadowDOM. In the current CSS specs, level 3, there's no way to target most ShadowDOM elements. You can read the specs on the ShadowDOM here, though there's not much in there regarding what you want.

选择的下拉菜单是所谓的ShadowDOM 的一部分。在当前的 CSS 规范级别 3 中,无法定位大多数 ShadowDOM 元素。您可以在此处阅读 ShadowDOM 上的规范,尽管其中没有太多关于您想要什么的内容。

Chrome has a few proprietary selectors to change someshadowDOM elements, but not all. Firefox has even fewer (as far as I know), and Opera has none. IE is probably just as bad or worse.

Chrome 有一些专有的选择器来改变一些shadowDOM 元素,但不是全部。Firefox 甚至更少(据我所知),而 Opera 没有。IE 可能同样糟糕或更糟。

Your best bet with compatibility in mind is to use a Jquery plugin to mimic the select using other HTML elements if you really want to style it. Here's a neat one.

考虑到兼容性,您最好的选择是使用 Jquery 插件来模拟使用其他 HTML 元素的选择,如果您真的想对其进行样式设置。这是一个整洁的

回答by Gutenberg

As far as I have understood this is not possible, are properties that depend on each browser, no questions past that may make things a little clearer.

据我所知,这是不可能的,属性取决于每个浏览器,过去没有任何问题可能会使事情变得更清楚。

Greetings.

你好。

Perhaps this may be of help:

也许这可能会有所帮助:

How to style a <select> dropdown with CSS only without JavaScript?

如何在没有 JavaScript 的情况下仅使用 CSS 设置 <select> 下拉列表的样式?

回答by Ronen Cypis

The short answer:

简短的回答

THIS CAN'T BE DONE WITH A selectELEMENT

这不能用一个select元素来完成

Possible solution:

可能的解决方案

Use any UI library (bootstrap, jquery UI, or any other) to make a custom select-like element, that you can style as you wish (they all generate a control using other, customization-friendly elements like ul, li, div....)

使用任何 UI 库(bootstrapjquery UI任何其他)来制作一个自定义的类似 select 的元素,你可以根据自己的意愿设置样式(它们都使用其他自定义友好的元素生成控件,例如ul, li, div.... )