Question

拥有此HTML

<select>
  <option style="color:green">green</option>
  <option style="color:red">red</option>
</select>

我想让selectbox从所选选项继承其颜色。唉

select { color: inherit; }

没有做到这一点。有没有纯CSS解决方案？

修改： 我知道有简单的JavaScript解决方案。我不想制作花哨的选择框，只是继承所选选项的颜色。

Answer 1

这相当粗糙，但可行（需要JavaScript）

<select onchange="this.style.color = this.options[this.selectedIndex].style.color;">
  <option style="color:green">green</option>
  <option style="color:red">red</option>
</select>

演示：http://jsfiddle.net/pbjvqhbc/

Answer 2

根据其子元素的状态编辑父元素还不能在纯CSS中完成。你必须使用JavaScript来解决这个问题。

正如评论中所提到的，这个答案是基于使用jQuery而不是vanilla JS

$(document).ready(function() {
    $('select').on('change', function() {
        $(this).css('color', $(this).find(':selected').css('color'));
    });
});

Answer 3

不幸的是，您的问题的答案是：否。

单独使用CSS时，您无法设置与选择用户相关的选择本身。

有一些有趣的选择器，例如:checked或:target，但没有一个可以帮助您设置父元素的样式。

如何设置selectbox样式以从所选选项继承它的颜色？

3 个答案: