如果用戶在文本表單域中輸入文本，可以通過CSS/HTML顯示其他表單域？

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

這個工作對我來說，它添加到你的CSS：

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

，並刪除周圍textarea的股利和ASIGN 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

Answer 2

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/

值得一讀的還有的使用限制和:not僞類：

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

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