html - 选择背景为 :inherit bug 的选项

Question

当我使用 background:inherit 为某些元素设计页面样式时，我注意到出于某种原因，下拉菜单/选择的选项有时会丢失其背景颜色(在 Google Chrome 上)。我做了一些测试，发现它显然与 select 元素本身是否有父元素有关。

你可以用这个小例子明白我的意思:

<div style="background: blue; margin-bottom: 50px;">
	<select style="background: inherit;">
		<option value="default">Default</option>
		<option value="stitch">Option 1</option>
	</select>
</div>

<div style="background: blue; margin-bottom: 50px;">
	<div>
		<select style="background: inherit;">
			<option value="default">Default</option>
			<option value="stitch">Option 1</option>
		</select>
	</div>
</div>

当您现在单击打开两个下拉菜单时，我希望它们都具有蓝色背景色。然而，这是我得到的结果(合并图像以便于比较)

我想知道这是否是继承值工作的预期方式，以及为什么它会以这种方式工作。

Answer 1

这里的继承值是元素的直接父属性 第二个下拉 div 没有任何背景颜色，默认的白色背景应用于选择。

代码示例 - https://codepen.io/nagasai/pen/NBqeOg?editors=1010

我创建了另一个具有不同背景的 div 并选择继承

<div style="background: blue; margin-bottom: 50px;">
	<select style="background: inherit;">
		<option value="default">Default</option>
		<option value="stitch">Option 1</option>
	</select>
</div>

<div style="background: blue; margin-bottom: 50px;">
	<div>
		<select style="background: inherit;">
			<option value="default">Default</option>
			<option value="stitch">Option 1</option>
		</select>
	</div>
</div>

<div style="background: blue; margin-bottom: 50px;">
	<div style="background: red;">
		<select style="background: inherit;">
			<option value="default">Default</option>
			<option value="stitch">Option 1</option>
		</select>
	</div>
</div>