html - CSS 元素和文本不透明度

Question

是否有任何选项可以将元素的不透明度(在我的例子中是它的下拉菜单)设置为零，但将此元素中的文本不透明度设置为 100？我想这样做是因为使用 0 不透明度我可以隐藏箭头但文本也隐藏，所以我需要一个解决方法

Answer 1

不，没有办法做到这一点，因为 children 继承了opacity来自父级的属性(无法更改)，以及 <option>元素不能存在于 <select> 之外元素。

换句话说，如果您设置 <select>元素的 opacity至 0 ，您实际上隐藏了该元素及其子元素。

你没有使用 <select>元素，我会说你可以使用 position: relative;或 position: absolute使用 z-index 将文本覆盖在 opacity 的父元素上已设置为零。

我确实记得，当我第一次开始涉足 Web 开发的美妙世界时，我自己研究了这个问题。这种情况是 w3schools 如何提供错误信息的完美示例，因为他们的示例使它看起来可以做到。

如果您真的为此需要一个解决方案，那么我建议您在没有现有工具的情况下做我们都喜欢做的事情:发明一个。制作您自己的 <select> 版本元素，并使用 JavaScript 使其工作。您甚至可以创建自己的 XML 标记并使用 JavaScript 告诉它如何呈现和执行。或者，您可以只使用 <div>小号，<span> s(当然还有其他)，以及 CSS 和 JavaScript 来实现这一点。

祝你好运! :)