Question

我正试图找出一种方法来应用this CSS / HTML方法，以便在选择单选按钮或复选框时显示其他表单字段，以及在文本表单字段中输入文本的情况。

我是新手，希望此时避免使用jquery和javascript。

这是“我的”CSS （如果选择了文本表单字段，它将与“焦点”一起使用，但是一旦用户尝试选择新显示的表单字段，它就会因为“焦点”条件而消失不再适用）：

.reveal-if-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}
input[type="radio"]:checked ~ .reveal-if-active,
input[type="text"]:focus ~ .reveal-if-active,
input[type="checkbox"]:checked ~ .reveal-if-active {
  opacity: 1;
  max-height: 600px; 
  overflow: visible;

上面我寻求帮助的CSS系列是：

input[type="text"]:focus ~ .reveal-if-active,

这是HTML：

<div>
    <p>Question I'm asking user to answer in the beginning form field is here</p>
    <div><input type="text" name="beginning-text-field" id="beginning-text-field" value="" placeholder="placeholder text goes here" /><br />
        <div class="reveal-if-active">
        <textarea id="revealed-form-field" name="revealed-form-field" value="" placeholder="Revealed placeholder text goes here" rows="4" maxchar="1000"></textarea>
        </div>
    </div>
</div>

Answer 1

input无法在CSS中使用:empty伪类，但您可以利用:not和:placeholder-shown。使用这些组合，您可以通过以下方式获得所需的结果：

<强> CSS

.group label, .group input {
    display: block;
}

.elaborate {
    display: none;
    opacity: 0;
}

.question:not(:placeholder-shown) + .elaborate {
    display: block;
    opacity: 1;
}

<强> HTML

<div class="group">
    <label for="q1">Question One</label>
    <input type="text" name="q1_answer" class="question" placeholder="Question 1 Answer" />
    <textarea name="q1_elaborate" class="elaborate" placeholder="Please elaborate"></textarea>
</div>

你可以在这里看到一个小提琴：https://jsfiddle.net/7zp9pgqL/

值得一读的还有:placeholder-shown和:not伪类的使用限制：

http://caniuse.com/#feat=css-placeholder-shown

http://caniuse.com/#feat=css-not-sel-list

Answer 2

这对我有用，请将此添加到您的CSS中：

.reveal-if-active:focus {
  max-height: none;
  opacity: 1;
  overflow: visible;
}

并删除textarea周围的div并将div的类别设为textarea：

<div>
    <p>Question I'm asking user to answer in the beginning form field is here</p>
    <div><input type="text" name="beginning-text-field" id="beginning-text-field" value="" placeholder="placeholder text goes here" /><br />
        <textarea class="reveal-if-active" id="revealed-form-field" name="revealed-form-field" value="" placeholder="Revealed placeholder text goes here" rows="4" maxchar="1000"></textarea>
    </div>
</div>

Demo

如果用户在文本表单字段中输入文本，则通过CSS / HTML显示其他表单字段的方法是什么？

2 个答案: