选择带有背景的选项：继承错误

Question

当我使用某些元素的背景：继承来设计页面样式时，我注意到由于某些原因，下拉菜单/选择的选项有时会失去背景色（在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>

Answer 2

Div从其父项继承财产！

<pre><div style="background: blue; margin-bottom: 50px;"><!-- select's parent -->
    <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 style="background: inherit;"><!-- select's parent -->
        <select style="background: inherit;">
            <option value="default">Default</option>
            <option value="stitch">Option 1</option>
        </select>
    </div>
</div></pre>