CSS를 사용하여 선택을 한 후에 입력 필드를 표시하는 방법

이전 옵션을 선택하지 않은 경우 양식 필드를 편집하여 숨김 상태로 유지하고 싶습니다.CSS를 사용하여 선택을 한 후에 입력 필드를 표시하는 방법

예를 들어, 응용 프로그램에서 참조 방식을 선택할 수있는 옵션이 있습니다. '기타'옵션을 선택하면 아래에 '기타'가 무엇인지 묻는 새 필드가 나타납니다.

나는 javascript/jquery에서 경험이 없다 ... CSS로 할 수 있다면 위대한 것이다. 그렇지 않다면 지금 배우고있는 언어에 추가 할 수 있습니다. 검사 의사 선택 :

#hidden { 
 
    display: none; 
 
} 
 

 
#other:checked~#hidden { 
 
    display: block; 
 
}

<div> 
 
    <label>option 1</label> 
 
    <input type="radio" name="option" /> 
 
    <label>other</label> 
 
    <input type="radio" id="other" name="option" /> 
 
    <div id="hidden"> 
 
    <span>this is a hidden field</span> 
 
    <input type="text" /> 
 
    </div> 
 
</div>

출처

2017-09-29 Eryk Chamberlin

는 CSS 난 그래서 ... 당신이 할 수 있다고 생각하지 않습니다 여기에 –

조언 주셔서 감사합니다; 그것의 테이블에 배우십시오. 나는 지금 막 배우고있는 4 개의 다른 언어를 문자 그대로 저글링하고있다 :) –

는 형제 선택 (~)과을 사용하여 순수 CSS의 솔루션입니다 귀하의 질문을 읽고, 당신은 "당신이"-> "새로운 필드가 나타납니다"이벤트에 대해 이야기하고 있습니다 : 이것은 JS이며, 또한 HTML/CSS

출처

2017-09-29 15:55:44 Fisch

CSS를 사용하여 선택을 한 후에 입력 필드를 표시하는 방법

답변

관련 문제