CSS选择基于HTML的另一个元素选择选项值 [英] CSS to select another Element based on a HTML Select Option Value

问题描述

有一个CSS选择器允许我基于HTML选择选项值来选择一个元素？

Is there a CSS selector that allows me to select an element based on an HTML select option value?

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<p>Display only if an option with value 1 is selected</p>

我正在寻找一个仅HTML / CSS方法，只显示选定数量的表单域。我已经知道如何使用Javascript。

I'm looking for an HTML/CSS only method to only display a selected number of form fields. I already know how to do it with Javascript.

有办法吗？

编辑：

问题标题可能具有误导性。我不是试图风格的选择框，这是很常见的和大量的答案已经。我实际上试图根据< select> < P> >。

The question title is perhaps misleading. I'm not trying to style the select box, that's pretty common and plenty of answers on SO already. I'm was actually trying to style the <P> element based on the value selected in the <select>.

我真正想做的是根据所选的数值显示一些表单域：

How ever what I'm really trying to do is to display a number of form fields based on a selected numeric value:

<select name="number-of-stuffs">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div class="stuff-1">
     <input type="text" name="stuff-1-detail">
     <input type="text" name="stuff-1-detail2">
</div>
<div class="stuff-2" style="display:none"> 
     <input type="text" name="stuff-2-detail">
     <input type="text" name="stuff-2-detail2">
</div>
<div class="stuff-3" style="display:none">
     <input type="text" name="stuff-3-detail">
     <input type="text" name="stuff-4-detail2">
</div>

我想显示 div.stuff-1 显示div.stuff-1 时，和 div.stuff-2 当数量为2时，code> div.stuff-2 和 div.stuff-3 。

I would like to display div.stuff-1 and div.stuff-2 when number-of-stuffs=2 and display div.stuff-1 div.stuff-2 and div.stuff-3 when number of stuffs=2.

如下所示：
http://jsfiddle.net/rL37w/

推荐答案

它被称为属性选择器

option[value="1"]
{
background-color:yellow;
} 

示例 http://jsfiddle.net/JchE5/

这篇关于CSS选择基于HTML的另一个元素选择选项值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！