체크 박스 스타일링 전용 CSS

Question

나는 체크 박스가 있는데 스타일을 지정하고 싶습니다. 확인란을 선택하지 않으면 검은 색 테두리가 생기고 확인란을 선택하면 구멍 확인 상자가 후크없이 검은 색이어야합니다. 아래에서 내가 지금까지 한 일을 볼 수 있습니다. 슬프게도 작동하지 않습니다.

내 코드 :

<form> 
    <input class="newsletter" type="checkbox" value="text">Ich möchte den Newsletter bekommen 
</form> 

input[type=checkbox]:not(old){ 
    width  : 13px; 
    margin : 0; 
    padding : 0; 
    opacity : 0; 
} 

.newsletter:unchecked{ 
    width:13px; 
    height: 13px; 
    border: 2px solid black; 
border-radius:3px; 
} 

.newsletter:checked{ 
    width:13px; 
    height: 13px; 
    border: 2px solid black; 
    background-color:black; 
border-radius:3px; 
} 

현재의 체크 박스를 숨겨야 내 코드의 첫 번째 부분. 두 번째 부분은 상자가 선택되어 있지 않은 경우 확인란과 상자가 선택되어있을 때 세 번째 부분이어야합니다. 나는 이것이 당신이이 체크 박스의 스타일을 결정하는 방법이라고 생각했다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

당신이 당신의 코드를 먼저해야 할 것은 도움이 될 수 있습니다, 예를 들면 :

<form> 
    <input class="newsletter" type="checkbox" value="text" id="newsletter" name="newsletter"> 
    <label for="newsletter">Ich möchte den Newsletter bekommen</label> 
</form> 

또한 추가 한 체크 박스에 id 및 name 속성이 있습니다. 이 트릭이 작동하려면 id이 label의 for 속성과 동일해야합니다.

다음으로 우리는 체크 박스를 눈에 띄게 숨길 필요가 있습니다. 나는 눈에 띄게 Yahoo's example에 따라 물건을 숨기기 위해 CSS에 sr-only의 클래스를 사용하는 경향이 :

.sr-only{ 
    height: 1px; 
    width: 1px; 
    overflow: hidden 
    clip: rect(1px,1px,1px,1px); 
    position: absolute; 
} 

다음으로 우리는 의사 요소 before 라벨을 만들 수 있습니다. 스타일 규칙에 대해 인접한 형제 선택 도구 (+)를 사용하여 레이블이 인접한 형제 확인란 일 때 규칙을 적용합니다. newsletter을 선택하지 않은 경우 :not(checked) 수단이 규칙을 적용

.newsletter:not(checked) + label:before{ 
    content:" "; 
    display: inline-block; 
    width:13px; 
    height: 13px; 
    border: 2px solid black; 
    border-radius:3px; 
} 

: 그것은 단지 레이블 클래스 newsletter의 형제 자매를 that're 대상 것이다 그래서 나는 당신의 클래스 이름을 유지하고있다.

이

.newsletter:checked + label:before{ 
background-color:black; 
} 

우리의 의사 확인란 또는 상자를 확인합니다 레이블의 텍스트를 클릭하면이 방법 (클릭 레이블이 전혀 보냅니다 newsletter이 checked 때

우리는이 같은 배경 색상을 변경하려면 스타일을 변경하려면 필드에 초점을 맞추기 때문에 확인란을 선택하면됩니다).

Answer 2

이것은 label를 추가한다 당신에게

.checkbox input[type=checkbox] { 
 
    display: none; 
 
} 
 
.checkbox input[type=checkbox]:not(:checked) + label:before { 
 
    content: ""; 
 
    border: 2px solid #000; 
 
    height: 10px; 
 
    width: 10px; 
 
    display: inline-block; 
 
} 
 
.checkbox input[type=checkbox]:checked + label:before { 
 
    content: ""; 
 
    border: 2px solid #000; 
 
    height: 10px; 
 
    width: 10px; 
 
    background: #000; 
 
    display: inline-block; 
 
}

<form> 
 
    <div class="checkbox"> 
 
    <input id="check" class="newsletter" type="checkbox" value="text"> 
 
    <label for="check"> Ich möchte den Newsletter bekommen</label> 
 
    </div> 
 
</form>