Question

非常自我解释，我需要设置用户选择的选项的样式。这可能没有javascript吗？

简单示例：

HTML：

<select multiple>
    <option class="opt1" value="">Option 1</option>
    <option class="opt2" value="">Option 2</option>
</select>

CSS：

.opt1[selected]{
    background-color: red;
}
.opt2{
    background-color: green;
}

JS Fiddle Example

Answer 1

试试这个。

<style>
.your-select option:checked {background:#333;padding:20px;width:100px;border:3px solid #F00}
</style>


<select multiple class="your-select">
    <option class="opt1" value="">Option 1</option>
    <option class="opt2" value="">Option 2</option>
</select>

Answer 2

https://css-tricks.com/the-checkbox-hack/

本文介绍如何通过单击css来为元素设置样式。

这个想法是你在div旁边放一个隐藏的输入，并根据它的相邻输入来检查div的样式。

以下是例子：

HTML

<label for="toggle-1">Do Something</label>
<input type="checkbox" id="toggle-1">
<div>Control me</div>

CSS

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
   /* For mobile, it's typically better to position checkbox on top of clickable
      area and turn opacity to 0 instead. */
}

/* Default State */
div {
   background: green;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
}

/* Toggled State */
input[type=checkbox]:checked ~ div {
   background: red;
}

样式选定的选项

2 个答案: