Question

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

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

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

但是，这似乎没有做任何事情，并且背景保持为蓝色，而文本的颜色保持为白色。我该如何更改这些颜色？

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

Answer 1

完整代码：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%);
}

Answer 2

由于似乎没有人有答案，我会说对我有用，有点黑客。事实证明操作系统设置了选择选项的背景颜色，因此无法使用css更改背景颜色。但是，box-shadow属性的工作原理如下：

.body > select > option:checked { 
    box-shadow: 0 0 10px 100px #00B2F3 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 个答案: