html - 我可以将元素嵌套在表单的选择标签中吗？

Question

我想在一堆颜色选项旁边添加一个颜色样本，即...

标记:

<select class="form-control required" name="stripe-form-color">
    <option>Pacific Blue <span class="blue"></span></option> </select>

CSS:

form select span {
    margin-left: 10px;
    height: 10px;
    width: 10px;
    border: 1px solid #000;
}

form .blue {
    background: #27a9d4;
}

当我尝试这样做并检查源代码时，span 没有显示在 select 元素中。

非常感谢任何帮助，谢谢!

Answer 1

没有。 select 标签内唯一允许的元素是 option 和 optgroup。如果您仔细研究过selects，您会发现浏览器完全控制了样式；您只会在 select 中看到纯粹的、无样式的黑色文本。如果您看到其他东西，那不是本地选择。

因此，您需要使用自定义解决方案来实现您想要的目标。你可以尝试像 jQuery.chosen 这样的东西，或尝试构建您自己的。