다음을 사용하여 확인란의 스타일을 지정하려고합니다.

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

그러나 스타일은 적용되지 않습니다. 확인란은 여전히 기본 스타일을 표시합니다. 지정된 스타일을 어떻게 지정합니까?

답변

최신 정보:

아래 답변은 CSS 3이 널리 보급되기 전의 상태를 나타냅니다. 최신 브라우저 (Internet Explorer 9 이상 포함)에서는 JavaScript를 사용하지 않고 원하는 스타일로 확인란을 대체하는 것이 더 간단합니다.

유용한 링크는 다음과 같습니다.

근본적인 문제가 바뀌지 않았다는 점은 주목할 가치가 있습니다. 여전히 확인란 요소에 스타일 (테두리 등)을 직접 적용 할 수 없으며 해당 스타일이 HTML 확인란의 표시에 영향을 미칩니다. 그러나 변경된 것은 이제 CSS 이외의 다른 것을 사용하여 실제 확인란을 숨기고 자신의 스타일 요소로 바꿀 수 있다는 것입니다. 특히, CSS는 이제 광범위하게 지원되는 :checked선택기 가 있으므로 대체 된 항목의 확인란 상태를 올바르게 반영하도록 할 수 있습니다.

주문 답변

다음 은 스타일 체크 박스에 대한 유용한 기사 입니다. 기본적으로 해당 작성자는 브라우저마다 브라우저마다 매우 다양하며 스타일을 지정하는 방식에 관계없이 많은 브라우저에서 항상 기본 확인란을 표시합니다. 정말 쉬운 방법은 없습니다.

JavaScript를 사용하여 확인란의 이미지를 오버레이하고 해당 이미지를 클릭하면 실제 확인란이 선택되는 해결 방법을 상상하기 어렵지 않습니다. JavaScript가없는 사용자에게는 기본 확인란이 표시됩니다.

추가하기 위해 편집 : 여기 당신을 위해 좋은 스크립트가 있습니다 ; 실제 확인란 요소를 숨기고 스타일 범위로 바꾸고 클릭 이벤트를 리디렉션합니다.

답변

CSS 만 사용하여이를 수행 할 수있는 방법이 있습니다. label요소를 사용하고 대신 해당 요소의 스타일을 지정할 수 있습니다 . 주의 사항은 Internet Explorer 8 이하 버전에서는 작동하지 않는다는 것입니다.

.myCheckbox input {
  position: relative;
  z-index: -9999;
}

.myCheckbox span {
  width: 20px;
  height: 20px;
  display: block;
  background: url("link_to_image");
}

.myCheckbox input:checked + span {
  background: url("link_to_another_image");
}

<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
  <input type="checkbox" name="test" />
  <span></span>
</label>

스 니펫 확장

답변

:after및 :before의사 클래스 와 함께 제공되는 새로운 기능을 사용하면 멋진 사용자 정의 확인란 효과를 얻을 수 있습니다 . 이것의 장점은 다음과 같습니다. DOM에 더 많은 것을 추가 할 필요없이 표준 확인란 만 추가하면됩니다.

이것은 호환되는 브라우저에서만 작동합니다. 나는 이것이 일부 브라우저가 입력 요소 를 설정 :after하고 설정할 수 없다는 사실과 관련이 있다고 생각합니다 :before. 불행히도 현재 WebKit 브라우저 만 지원됩니다. Firefox + Internet Explorer는 여전히 확인란의 기능을 그대로 유지하고 스타일을 변경하지 않을 것이며 앞으로 코드가 벤더 접두사를 사용하지 않기 때문에 바뀔 것입니다.

이것은 WebKit 브라우저 솔루션 전용입니다 (Chrome, Safari, 모바일 브라우저)

바이올린 예를 참조하십시오.

$(function() {
  $('input').change(function() {
    $('div').html(Math.random());
  });
});

/* Main Classes */
.myinput[type="checkbox"]:before {
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
  border: 1px solid #808080;
  content: "";
  background: #FFF;
}

.myinput[type="checkbox"]:after {
  position: relative;
  display: block;
  left: 2px;
  top: -11px;
  width: 7px;
  height: 7px;
  border-width: 1px;
  border-style: solid;
  border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
  content: "";
  background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
  background-repeat: no-repeat;
  background-position: center;
}

.myinput[type="checkbox"]:checked:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}

.myinput[type="checkbox"]:disabled:after {
  -webkit-filter: opacity(0.4);
}

.myinput[type="checkbox"]:not(:disabled):checked:hover:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}

.myinput[type="checkbox"]:not(:disabled):hover:after {
  background-image: linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
  border-color: #85A9BB #92C2DA #92C2DA #85A9BB;
}

.myinput[type="checkbox"]:not(:disabled):hover:before {
  border-color: #3D7591;
}

/* Large checkboxes */
.myinput.large {
  height: 22px;
  width: 22px;
}

.myinput.large[type="checkbox"]:before {
  width: 20px;
  height: 20px;
}

.myinput.large[type="checkbox"]:after {
  top: -20px;
  width: 16px;
  height: 16px;
}

/* Custom checkbox */
.myinput.large.custom[type="checkbox"]:checked:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}

.myinput.large.custom[type="checkbox"]:not(:disabled):checked:hover:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table style="width:100%">
  <tr>
    <td>Normal:</td>
    <td><input type="checkbox" /></td>
    <td><input type="checkbox" checked="checked" /></td>
    <td><input type="checkbox" disabled="disabled" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" /></td>
  </tr>
  <tr>
    <td>Small:</td>
    <td><input type="checkbox" class="myinput" /></td>
    <td><input type="checkbox" checked="checked" class="myinput" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput" /></td>
  </tr>
  <tr>
    <td>Large:</td>
    <td><input type="checkbox" class="myinput large" /></td>
    <td><input type="checkbox" checked="checked" class="myinput large" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput large" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large" /></td>
  </tr>
  <tr>
    <td>Custom icon:</td>
    <td><input type="checkbox" class="myinput large custom" /></td>
    <td><input type="checkbox" checked="checked" class="myinput large custom" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput large custom" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large custom" /></td>
  </tr>
</table>

스 니펫 확장

보너스 웹킷 스타일 플립 스위치 바이올린

$(function() {
  var f = function() {
    $(this).next().text($(this).is(':checked') ? ':checked' : ':not(:checked)');
  };
  $('input').change(f).trigger('change');
});

body {
  font-family: arial;
}

.flipswitch {
  position: relative;
  background: white;
  width: 120px;
  height: 40px;
  -webkit-appearance: initial;
  border-radius: 3px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
  font-size: 14px;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid #ddd;
}

.flipswitch:after {
  position: absolute;
  top: 5%;
  display: block;
  line-height: 32px;
  width: 45%;
  height: 90%;
  background: #fff;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.3s ease-in 0s;
  color: black;
  border: #888 1px solid;
  border-radius: 3px;
}

.flipswitch:after {
  left: 2%;
  content: "OFF";
}

.flipswitch:checked:after {
  left: 53%;
  content: "ON";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<h2>Webkit friendly mobile-style checkbox/flipswitch</h2>
<input type="checkbox" class="flipswitch" /> &nbsp;
<span></span>
<br>
<input type="checkbox" checked="checked" class="flipswitch" /> &nbsp;
<span></span>

스 니펫 확장

답변

시작하기 전에 (2015 년 1 월 기준)

원래 질문과 답변은 이제 ~ 5 세입니다. 따라서 이것은 약간의 업데이트입니다.

첫째, 스타일 체크 박스와 관련하여 여러 가지 접근 방식이 있습니다. 기본 교리는 다음과 같습니다.

브라우저에서 스타일이 지정된 기본 확인란 컨트롤을 숨겨야하며 CSS를 사용하여 의미있는 방식으로 재정의 할 수 없습니다.
컨트롤을 숨겨도 여전히 체크 상태를 감지하고 토글 할 수 있어야합니다.
체크 박스의 체크 상태는 새로운 요소를 스타일링하여 반영해야합니다

해결책 (원칙)

위의 방법은 여러 가지 방법으로 달성 할 수 있으며 CSS3 의사 요소를 사용하는 것이 올바른 방법 인 경우가 종종 있습니다. 실제로, 옳고 그른 방법은 없으며, 그것이 당신이 그것을 사용할 상황에 가장 적합한 접근법에 달려 있습니다.

확인란을 label요소로 감싸십시오 . 이것은 숨겨져 있어도 레이블 내의 아무 곳이나 클릭해도 체크 상태를 전환 할 수 있음을 의미합니다.
확인란 숨기기
새로운 요소를 추가 한 후 그에 따라 스타일을합니다 확인란을 선택합니다. CSS를 사용하여 선택하고 :checked상태에 따라 스타일을 지정할 수 있도록 확인란 뒤에 표시되어야합니다 . CSS는 ‘뒤로’를 선택할 수 없습니다.

솔루션 (코드)

코드 스 니펫 표시

label input {
  visibility: hidden;/* <-- Hide the default checkbox. The rest is to hide and allow tabbing, which display:none prevents */
  display: block;
  height: 0;
  width: 0;
  position: absolute;
  overflow: hidden;
}
label span {/* <-- Style the artificial checkbox */
  height: 10px;
  width: 10px;
  border: 1px solid grey;
  display: inline-block;
}
[type=checkbox]:checked + span {/* <-- Style its checked state */
  background: black;
}

<label>
  <input type='checkbox'>
  <span></span>
  Checkbox label text
</label>

스 니펫 확장

세분화 (아이콘 사용)

그러나 이봐! 나는 당신이 소리를 듣는다. 상자에 작은 진드기 나 십자 표시를하려면 어떻게해야합니까? 그리고 배경 이미지를 사용하고 싶지 않습니다!

CSS3의 유사 요소가 작용할 수있는 곳입니다. 이들은 상태를 나타내는 유니 코드 아이콘content 을 주입 할 수 있는 속성을 지원합니다 . 다른 방법으로, 같은 타사 글꼴 아이콘 소스를 사용할 수있는 글꼴 최고 (메이크업은 당신이 또한 관련 설정하지만 예에를 )font-familyFontAwesome

label input {
  display: none; /* Hide the default checkbox */
}

/* Style the artificial checkbox */
label span {
  height: 10px;
  width: 10px;
  border: 1px solid grey;
  display: inline-block;
  position: relative;
}

/* Style its checked state...with a ticked icon */
[type=checkbox]:checked + span:before {
  content: '\2714';
  position: absolute;
  top: -5px;
  left: 0;
}

<label>
  <input type='checkbox'>
  <span></span>
  Checkbox label text
</label>

스 니펫 확장

답변

SW4의 답변에 대한 조언을 따르겠습니다 . 확인란을 숨기고 맞춤 범위로 표시하여 다음 HTML을 제안하십시오.

<label>
  <input type="checkbox">
  <span>send newsletter</span>
</label>

랩인 레이블을 사용하면 “for-id”속성 링크없이 텍스트를 깔끔하게 클릭 할 수 있습니다. 하나,

사용하여 숨기지 마십시오 `visibility: hidden`또는`display: none`

클릭하거나 두드려서 작동하지만 확인란을 사용하는 절름발이입니다. 일부 사람들은 여전히 Tab초점을 이동 Space하고 활성화하고 해당 방법으로 숨기면 훨씬 더 효과적 입니다. 양식이 길면 다른 사람의 손목을 사용 tabindex하거나 accesskey속성으로 저장 합니다. 그리고 시스템 체크 박스 동작을 관찰하면 호버에 알맞은 그림자가 있습니다. 스타일이 올바른 확인란은이 동작을 따라야합니다.

cobberboy의 답변 은 글꼴이 확장 가능한 벡터이기 때문에 일반적으로 비트 맵보다 나은 Font Awesome 을 권장 합니다. 위의 HTML을 사용하여 다음 CSS 규칙을 제안합니다.

확인란 숨기기
```
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
```
z-index내 예제에서는 충분히 큰 확인란 스킨을 사용하여 완전히 덮을 수 있으므로 음수 를 사용합니다. left: -999px모든 레이아웃에서 재사용 할 수 없기 때문에 권장하지 않습니다 . Bushan wagh의 답변 은 방탄 방법을 제공하여 브라우저를 숨기고 브라우저가 tabindex를 사용하도록 유도하므로 좋은 대안입니다. 어쨌든, 둘 다 단지 해킹입니다. 오늘 올바른 방법 appearance: none은 Joost의 답변을 참조하십시오 .
```
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
```

스타일 체크 박스 라벨

input[type="checkbox"] + span {
  font: 16pt sans-serif;
  color: #000;
}

확인란 스킨 추가

input[type="checkbox"] + span:before {
  font: 16pt FontAwesome;
  content: '\00f096';
  display: inline-block;
  width: 16pt;
  padding: 2px 0 0 3px;
  margin-right: 0.5em;
}

\00f096Font Awesome ‘s square-o이며, 패딩은 초점에 점선 윤곽선을 제공하도록 조정됩니다 (아래 참조).

체크 박스 체크 스킨 추가
```
input[type="checkbox"]:checked + span:before {
  content: '\00f046';
}
```
\00f046Font Awesome ‘s check-square-o와 (와) 같은 너비가 아니므로 square-o위의 너비 스타일의 이유입니다.
초점 개요 추가
```
input[type="checkbox"]:focus + span:before {
  outline: 1px dotted #aaa;
}
```
Safari는이 기능을 제공하지 않으므로 (@Jason Sankey의 설명 참조) window.navigator브라우저 인 경우 브라우저를 감지하여 Safari 인 경우 건너 뛰어야합니다.

비활성화 확인란의 회색 설정

input[type="checkbox"]:disabled + span {
  color: #999;
}

비활성화되지 않은 확인란에 호버 그림자 설정

input[type="checkbox"]:not(:disabled) + span:hover:before {
  text-shadow: 0 1px 2px #77F;
}

데모 피들

확인란 위로 마우스를 가져 Tab가고 Shift+ Tab를 사용 하여 이동하고 Space전환합니다.

답변

label예제가 아래에 있는 요소를 사용하여 약간의 속임수로 확인란의 스타일을 지정할 수 있습니다 .

.checkbox > input[type=checkbox] {
  visibility: hidden;
}

.checkbox {
  position: relative;
  display: block;
  width: 80px;
  height: 26px;
  margin: 0 auto;
  background: #FFF;
  border: 1px solid #2E2E2E;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

.checkbox:after {
  position: absolute;
  display: inline;
  right: 10px;
  content: 'no';
  color: #E53935;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
  text-transform: capitalize;
  z-index: 0;
}

.checkbox:before {
  position: absolute;
  display: inline;
  left: 10px;
  content: 'yes';
  color: #43A047;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
  text-transform: capitalize;
  z-index: 0;
}

.checkbox label {
  position: absolute;
  display: block;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 20px;
  background: #2E2E2E;
  cursor: pointer;
  transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  z-index: 1;
}

.checkbox input[type=checkbox]:checked + label {
  left: 43px;
}

<div class="checkbox">
  <input id="checkbox1" type="checkbox" value="1" />
  <label for="checkbox1"></label>
</div>

스 니펫 확장

그리고 위 코드에 대한 FIDDLE . 일부 CSS는 이전 버전의 브라우저에서는 작동하지 않지만 멋진 JavaScript 예제가 있습니다.

답변

구현이 간단하고 쉽게 사용자 지정할 수있는 솔루션

많은 검색과 테스트를 거친 후에 구현하기 쉽고 사용자 정의하기 쉬운이 솔루션을 얻었습니다. 이 솔루션에서 :

외부 라이브러리와 파일이 필요하지 않습니다
페이지에 HTML을 추가 할 필요가 없습니다.
확인란 이름과 ID를 변경할 필요가 없습니다

흐르는 CSS를 페이지 상단에 놓으면 모든 확인란 스타일이 다음과 같이 변경됩니다.

input[type=checkbox] {
  transform: scale(1.5);
}

input[type=checkbox] {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  cursor: pointer;
  font-size: 17px;
  visibility: hidden;
}

input[type=checkbox]:after {
  content: " ";
  background-color: #fff;
  display: inline-block;
  margin-left: 10px;
  padding-bottom: 5px;
  color: #00BFF0;
  width: 22px;
  height: 25px;
  visibility: visible;
  border: 1px solid #00BFF0;
  padding-left: 3px;
  border-radius: 5px;
}

input[type=checkbox]:checked:after {
  content: "\2714";
  padding: -5px;
  font-weight: bold;
}

How IT

언제든지 물어보세요.

CSS를 사용하여 확인란의 스타일을 지정하는 방법 스 니펫 실행결과 숨기기스 니펫 확장 그러나

답변

답변

답변

답변

시작하기 전에 (2015 년 1 월 기준)

해결책 (원칙)

솔루션 (코드)

세분화 (아이콘 사용)

답변

사용하여 숨기지 마십시오 `visibility: hidden`또는`display: none`

데모 피들

답변

답변

구현이 간단하고 쉽게 사용자 지정할 수있는 솔루션

답변

답변

답변

답변

시작하기 전에 (2015 년 1 월 기준)

해결책 (원칙)

솔루션 (코드)

세분화 (아이콘 사용)

답변

사용하여 숨기지 마십시오 visibility: hidden또는display: none

데모 피들

답변

답변

구현이 간단하고 쉽게 사용자 지정할 수있는 솔루션

사용하여 숨기지 마십시오 `visibility: hidden`또는`display: none`