>

CSS로 체크 된 라디오 버튼을 숨길 수 있는지 알고 싶습니다 :

 { display:none; }

이 요소를 해결하는 방법을 모르겠습니다. 선택한 라디오 버튼은 항상 "없음"으로 표시되어 사용자에게 아무런 의미가 없으며 숨기고 싶습니다. 이게 가능해? 포인터 주셔서 감사합니다.


  • 답변 # 1

    단, 팁과 ↑ 및 ↓ 키로 이동하는 것과 같이 라디오 및 확인란에 대한 모든 브라우저의 기본 지원을 계속 사용하려면 CSS를 position:fixed;opacity:0 로 설정하십시오. 이렇게하면 모든 기능은 유지되지만 입력을 숨기고 레이아웃 공간을 차지하지 않습니다. 지난 3 시간 동안 이것을 알아 냈지만 효과가 있습니다!

  • 답변 # 2

    Nathan Lee 답변에 추가

    input[type="radio"]:checked{
        visibility:hidden;
    }
    
    

    확인 된 라디오 버튼을 지정하는 옵션입니다

    input[type="radio"][value="text"]:checked{
        visibility:hidden;
    }
    
    

    'text'(예시 'none')와 같은 값으로 선택된 라디오 버튼을 지정하는 옵션입니다

    추가 정보 : https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

    값을 모르면 일부 jQuery가 트릭을 수행 할 수 있습니다. http://api.jquery.com/attribute-equals-selector/

  • 답변 # 3

    visibility:hidden; 사용해보기  작동합니다.

    다음은작동중인 데모입니다.

    HTML :

    <input class="checked" type="radio" checked />
    
    

    CSS :

    input.checked[type="radio"]{visibility:hidden;}
    
    

    이것이 당신이 찾고있는 것이기를 바랍니다.

  • 답변 # 4

    체크 박스/라디오를 여러 번 숨기려면 사용자 정의 체크 박스/라디오를 만드는 것입니다.

    입력 용 라벨에 초점을 맞추려면 불투명도를 사용하십시오 : 0;위치 : 절대;폭 : 0;공간을 차지하지 않고 입력을 보이지 않게합니다.

    디스플레이를 사용하는 경우 : 없음;또는 가시성 : 숨겨 짐;비슷한 효과가 있지만 현재 가장 많이 사용되는 브라우저 (MSIE11, Edge, Chrome 60.0.3112.101, Firefox 55)는 키보드를 사용하여 요소의 초점을 맞출 수 없으므로 접근성이 떨어집니다.

    .opacity {
    	position: absolute;
    	opacity: 0;
    	width: 0;		/* for internet explorer */
    }
    .visibility {
    	visibility: hidden;
    }
    .nodisplay {
    	display: none;
    }
    input[type=checkbox]+label {
    	font-weight: normal;
    }
    input[type=checkbox]:checked+label {
    	font-weight: bold;
    }
    input[type=checkbox]:focus+label {
    	border: 1px dotted #000;
    }
    
    
    <p>
    	<input type="button" value="Click this button and press tab to change focus">
    </p>
    <div>
       <input class="opacity" type="checkbox" id="checkbox1">
       <label for="checkbox1">Press space to (un)check</label>
    </div>
    <div>
       <input class="opacity" type="checkbox" id="checkbox2">
       <label for="checkbox2">Press space to (un)check</label>
    </div>
    <div>
       <input class="visibility" type="checkbox" id="checkbox3">
       <label for="checkbox3">Press space to (un)check</label>
    </div>
    <div>
       <input class="visibility" type="checkbox" id="checkbox4">
       <label for="checkbox4">Press space to (un)check</label>
    </div>
    <div>
       <input class="nodisplay" type="checkbox" id="checkbox5">
       <label for="checkbox5">Press space to (un)check</label>
    </div>
    <div>
       <input class="nodisplay" type="checkbox" id="checkbox6">
       <label for="checkbox6">Press space to (un)check</label>
    </div>
    
    

    데모 : https://jsfiddle.net/Lmt4zrvn/

  • 답변 # 5

    :checked 를 사용해보십시오  선택기 :

    input[type="radio"]:checked {
        display: none;
    }
    
    

    데모 : http://jsfiddle.net/RkzG5/

관련 자료

  • 이전 c# - 제네릭 클래스에서 종속성을 주입하는 오류
  • 다음 Nexus 프록시를 사용한 Scala SBT Scoverage 플러그인 해상도