CSS 체크 박스 입력 스타일링

모든 스타일 input은 모든 입력 요소 에 영향 을 줍니다. 각 확인란 요소에 클래스를 적용하지 않고 확인란에만 적용 할 스타일을 지정하는 방법이 있습니까?

CSS 2를 사용하면 다음을 수행 할 수 있습니다.

input[type='checkbox'] { ... }

이것은 현재까지 광범위하게 지원되어야합니다. 브라우저 지원 참조

라벨이없는 자체 솔루션을 만듭니다.

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 16px;
         height: 16px;
         top: 0;
         left: 0;
         border: 2px solid #555555;
         border-radius: 3px;
         background-color: white;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid black;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#e9e9e9;
}
input[type=checkbox]:checked:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#1E80EF;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid white;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

최근 라디오 버튼 및 확인란의 스타일을 지정하기 위해 발견 한 것. 전에는 jQuery와 다른 것들을 사용해야했습니다. 그러나 이것은 바보처럼 간단합니다.

input[type=radio] {
    padding-left:5px;
    padding-right:5px;
    border-radius:15px;

    -webkit-appearance:button;

    border: double 2px #00F;

    background-color:#0b0095;
    color:#FFF;
    white-space: nowrap;
    overflow:hidden;

    width:15px;
    height:15px;
}

input[type=radio]:checked {
    background-color:#000;
    border-left-color:#06F;
    border-right-color:#06F;
}

input[type=radio]:hover {
    box-shadow:0px 0px 10px #1300ff;
}

당신은 분명히 변경, 체크 박스에 대해 동일한 작업을 수행 할 수 있습니다 input[type=radio]에 input[type=checkbox]변화 border-radius:15px;에border-radius:4px; .

이것이 당신에게 다소 유용하기를 바랍니다.

수업은 다음과 같이 잘 작동합니다.

<style>
  form input .checkbox
  {
    /* your checkbox styling */
  }
</style>

<form>
  <input class="checkbox" type="checkbox" />
</form>

다음을 수행하여 특정 속성에만 적용 할 수 있습니다.

input[type="checkbox"] {...}

여기에 설명되어 있습니다 .

input[type="checkbox"] {
 /* your style */
}

그러나 이것은 IE7 이하를 제외한 브라우저에서만 작동하며 클래스를 사용해야하는 브라우저에서는 작동합니다.

Trident 는 ::-ms-check확인란 및 라디오 버튼 컨트롤을위한 유사 요소를 제공합니다 . 예를 들면 다음과 같습니다.

<input type="checkbox">
<input type="radio">

::-ms-check {
    color: red;
    background: black;
    padding: 1em;
}

이것은 Windows 8의 IE10에서 다음과 같이 표시됩니다.

IE6는 속성 선택자를 이해하지 못하므로 IE6에서만 볼 수있는 스크립트 (조건부 주석 포함)와 Dean Edwards의 jQuery 또는 IE7.js 를 결합 할 수 있습니다 .

IE7 (.js)은 Microsoft Internet Explorer가 표준 호환 브라우저처럼 작동하도록하는 JavaScript 라이브러리입니다. 많은 HTML 및 CSS 문제를 해결하고 IE5 및 IE6에서 투명 PNG가 올바르게 작동합니다.

클래스 또는 jQuery 또는 IE7.js 사용의 선택은 좋아하는 것과 싫어하는 것 및 다른 요구에 달려 있습니다 (IE6의 1 비트 투명도로 폴백하는 완전한 투명도로 PNG-8에 의존하지 않고 사이트 전체의 PNG-24 투명도) -Fireworks 및 pngnq 등에서 만 생성)

CSS는 확인란 유형 또는 다른 유형에 특정한 스타일을 수행하는 방법을 제공하지만이를 지원하지 않는 브라우저에는 문제가 있습니다.

이 경우 귀하의 유일한 옵션은 체크 박스에 수업을 적용하는 것입니다.

class = "checkbox"를 체크 박스에 추가하십시오.

그런 다음 CSS 코드에서 해당 스타일을 만듭니다.

당신이 할 수있는 한 가지는 :

main.css

input[type="checkbox"] { /* css code here */ }

ie.css

.checkbox{ /* css code here for ie */ }

그런 다음 IE 특정 CSS를 사용하십시오.

<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

IE에서 작동하려면 클래스를 추가해야하며 IE를 지원하지 않는 다른 비 IE 브라우저에서는 작동하지 않습니다. 그러나 그것은 CSS 코드로 웹 사이트를 앞으로 생각하게 만들고 IE는 지원을 받으면 확인란에서 특정 CSS 코드와 CSS 클래스를 제거 할 수 있습니다.