是否可以定位< select>选择特定选项? [英] Is it possible to target a <select> with a specific option selected?

问题描述

说我有以下HTML:

<select>
    <option value="0">Closed</option>
    <option value="1">Open</option>
</select>

我想在<select>上添加一个边框，该边框取决于当前选择的值:

I'd like to add a border to the <select> that depends on the currently selected value:

• 选择Closed时出现红色边框
• 选择Open时的绿色边框

• Red border when Closed is selected
• Green border when Open is selected

是否有一个CSS选择器仅将<select>的值设置为0或1时定位?

Is there a CSS selector that would target the <select> only when its value is 0 or 1?

推荐答案

仅在CSS中这是不可能的，因为CSS对选定的下拉菜单option没有任何了解. (即使这样做，也无法匹配option，然后返回到父级select.)

This is not possible purely in CSS, as CSS does not have any understanding of selected dropdown options. (Even if it did, it would not be possible to match the option then go back up to the parent select).

因此，JavaScript是您唯一的选择.我可以提供一个示例，但是您没有标记JavaScript问题，因此我不知道这是否适合您.

As such, JavaScript is your only option here. I can provide an example, but you didn't tag the question JavaScript so I don't know if this is an option for you.

这篇关于是否可以定位< select>选择特定选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！