选定选项的样式背景答案

【问题标题】：styling background of selected option选定选项的样式背景
【发布时间】：2017-04-25 19:16:56
【问题描述】：

我在 jsfiddle 上有这个代码用于选择框： https://jsfiddle.net/v7tqumpe/1/

我希望能够更改所选选项的背景颜色。它默认为蓝色，但我想更改它以及文本的颜色。经过一番搜索，我发现所选选项的 css 是 option:checked。所以，我尝试了这个：

.body > select > option:checked { 
    background: black;
    color: red;
}

但是，这似乎没有任何作用，背景保持为蓝色，而文本的颜色保持为白色。如何更改这些颜色？

此外，我想更改所选选项失焦时的背景/颜色（现在，它默认为灰色背景，这在 imo 中非常难看）

【问题讨论】：

标签： html css background html-select

【解决方案1】：

由于似乎没有人有答案，我会说什么对我有用，一个小技巧。原来操作系统设置了一个选择选项的背景颜色，所以背景颜色不能用css改变。但是，box-shadow 属性的工作方式如下：

.body > select > option:checked { 
    box-shadow: 0 0 10px 100px #00B2F3 inset;
}

它允许您设置颜色并说 inset，仅表示当前选择的选项。

现在，它的工作： https://jsfiddle.net/v7tqumpe/5/

文本颜色无法更改，所以仍然是白色。

这里是完整的代码：

.body > select > option { 
		padding-top: 1px;
		cursor: default;
	}
	.body > select > option:checked { 
		box-shadow: 0 0 10px 100px #00B2F3 inset;
	}
	.body > select { 
		height: 100%;
		width: calc(100% - 10px);
		color: #00B2F3;
		border: 1px solid #00B2F3;
		padding: 0px 0px;
	}

<div class="body">

		<select size="7" class="form-control" id="subjects">
				<option>one</option>
                <option>two</option>
                <option>three</option>
		</select>

</div>

【讨论】：

【解决方案2】：

完整代码：Change background of selected option

实际上，您不能在:checked 选项元素上设置所有 CSS 属性的样式。 color , background-color 不能直接使用，所以你必须使用 background 来代替。

HTML：

<div class="body">
    <select size="7" class="form-control" id="subjects">
        <option>one</option>
        <option>two</option>
        <option>three</option>
    </select>
</div>

CSS：

.body > select option:checked { 
    background: linear-gradient(0deg, black 0%, black 100%);
    background: -moz-linear-gradient(0deg, black 0%, black 100%);
    background: -webkit-gradient(0deg, black 0%, black 100%);
}

【讨论】：