program story

CSS를 사용하여 체크 박스 스타일을 지정하는 방법

inputbox 2020. 9. 29. 07:45
반응형

CSS를 사용하여 체크 박스 스타일을 지정하는 방법

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

<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, 모바일 브라우저).

예제 Fiddle 참조

$(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>

보너스 Webkit 스타일 flipswitch 바이올린

$(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 년이되었습니다. 따라서 이것은 약간의 업데이트입니다.

첫째, 스타일 지정 확인란에 관한 여러 가지 접근 방식이 있습니다. 기본 신조는 다음과 같습니다.

  1. 브라우저에서 스타일이 지정되고 CSS를 사용하여 의미있는 방식으로 재정의 할 수없는 기본 확인란 컨트롤을 숨겨야합니다.

  2. 컨트롤을 숨긴 상태에서도 여전히 체크 된 상태를 감지하고 토글 할 수 있어야합니다.

  3. 체크 박스의 체크 상태는 새 요소의 스타일을 지정하여 반영해야합니다.

해결책 (원칙)

위의 작업은 여러 가지 방법으로 수행 할 수 있으며 CSS3 의사 요소를 사용하는 것이 올바른 방법이라는 말을 자주 듣게 될 것입니다. 사실, 진짜 옳고 그른 방법은 없습니다. 그것은 당신이 그것을 사용하게 될 상황에 가장 적합한 접근 방식에 달려 있습니다. 즉, 저는 선호하는 방법이 있습니다.

  1. 체크 박스를 label요소로 감싸세요 . 즉, 숨겨져 있어도 레이블 내의 아무 곳이나 클릭하면 선택 상태를 전환 할 수 있습니다.

  2. 체크 박스 숨기기

  3. 그에 따라 스타일을 지정할 확인란 뒤에 새 요소를 추가합니다 . 체크 박스 뒤에 나타나야 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 awesome과 같은 타사 글꼴 아이콘 소스를 사용할 수 있습니다 ( 예 : 관련를 설정해야합니다 ).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 규칙을 제안합니다.

  1. 체크 박스 숨기기

    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;
}

  2. 스타일 체크 박스 라벨

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

  3. 체크 박스 스킨 추가

    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의 square-o이며 패딩은 초점에 점선 윤곽선을 제공하도록 조정됩니다 (아래 참조).

  4. 체크 박스 체크 스킨 추가

    input[type="checkbox"]:checked + span:before {
  content: '\00f046';
}

    \00f046위의 너비 스타일에 대한 이유 인와 check-square-o같은 너비가 아닌 Font Awesome의 square-o입니다.

  5. 초점 개요 추가

    input[type="checkbox"]:focus + span:before {
  outline: 1px dotted #aaa;
}

    Safari는이 기능을 제공하지 않으므로 (@Jason Sankey의 의견 참조) window.navigator브라우저를 감지하고 Safari 인 경우에는 건너 뛰어야합니다.

  6. 비활성화 된 확인란의 회색 색상 설정

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

  7. 비활성화되지 않은 확인란에 마우스 오버 그림자 설정

    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 예제가있을 것입니다.

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

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

  1. 외부 라이브러리 및 파일이 필요하지 않습니다.
  2. 페이지에 추가 HTML을 추가 할 필요가 없습니다.
  3. 체크 박스 이름과 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;
}

추가 마크 업을 추가하지 않아도됩니다. 이것은 CSS 설정을 통해 데스크톱 용 IE를 제외한 모든 곳에서 작동합니다 (그러나 Windows Phone 및 Microsoft Edge 용 IE에서는 작동) appearance.

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Styling checkbox */
  width: 16px;
  height: 16px;
  background-color: red;
}

input[type="checkbox"]:checked {
  background-color: green;
}
<input type="checkbox" />

CSS로 색상을 쉽게 수정할 수 있고 픽셀 밀도가 높은 장치에서 크기가 매우 잘 조정되기 때문에 아이콘 글꼴 (예 : FontAwesome)을 사용하는 것을 선호합니다. 여기에 위와 유사한 기술을 사용하는 또 다른 순수한 CSS 변형이 있습니다.

(아래는 정적 이미지이므로 결과를 시각화 할 수 있습니다 . 대화 형 버전 은 JSFiddle 을 참조하세요 .)

체크 박스 예

다른 솔루션과 마찬가지로 label요소를 사용합니다 . 인접 span은 체크 박스 문자를 보유합니다.

span.bigcheck-target {
  font-family: FontAwesome; /* Use an icon font for the checkbox */
}

input[type='checkbox'].bigcheck {
  position: relative;
  left: -999em; /* Hide the real checkbox */
}

input[type='checkbox'].bigcheck + span.bigcheck-target:after {
  content: "\f096"; /* In fontawesome, is an open square (fa-square-o) */
}

input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
  content: "\f046"; /* fontawesome checked box (fa-check-square-o) */
}

/* ==== Optional - colors and padding to make it look nice === */
body {
  background-color: #2C3E50;
  color: #D35400;
  font-family: sans-serif;
  font-weight: 500;
  font-size: 4em; /* Set this to whatever size you want */
}

span.bigcheck {
  display: block;
  padding: 0.5em;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<span class="bigcheck">
  <label class="bigcheck">
    Cheese
    <input type="checkbox" class="bigcheck" name="cheese" value="yes" />
    <span class="bigcheck-target"></span>
  </label>
</span>

여기에 JSFiddle 이 있습니다.

최근에 나는 문제에 대한 매우 흥미로운 해결책을 발견했습니다.

을 사용 appearance: none;하여 확인란의 기본 스타일을 해제 한 다음 여기에 설명 된대로 직접 작성할 수 있습니다 (예제 4) .

바이올린 예

input[type=checkbox] {
  width: 23px;
  height: 23px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-right: 10px;
  background-color: #878787;
  outline: 0;
  border: 0;
  display: inline-block;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

input[type=checkbox]:focus {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

input[type=checkbox]:checked {
  background-color: green;
  text-align: center;
  line-height: 15px;
}
<input type="checkbox">

불행히도 브라우저 지원은 appearance옵션에 대해 매우 나쁩니다 . 내 개인 테스트에서 Opera와 Chrome 만 올바르게 작동합니다. 그러나 더 나은 지원이 제공되거나 Chrome / Opera 만 사용하고 싶을 때 간단하게 유지하는 방법입니다.

"사용해도 되나요?" 링크

내 솔루션

input[type="checkbox"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  background: lightgray;
  height: 16px;
  width: 16px;
  border: 1px solid white;
}

input[type="checkbox"]:checked {
  background: #2aa1c0;
}

input[type="checkbox"]:hover {
  filter: brightness(90%);
}

input[type="checkbox"]:disabled {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}

input[type="checkbox"]:after {
  content: '';
  position: relative;
  left: 40%;
  top: 20%;
  width: 15%;
  height: 40%;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: none;
}

input[type="checkbox"]:checked:after {
  display: block;
}

input[type="checkbox"]:disabled:after {
  border-color: #7b7b7b;
}
<input type="checkbox"><br>
<input type="checkbox" checked><br>
<input type="checkbox" disabled><br>
<input type="checkbox" disabled checked><br>

다음은 jQuery 또는 JavaScript 코드가없는 간단한 CSS 솔루션입니다.

FontAwseome 아이콘을 사용하고 있지만 모든 이미지를 사용할 수 있습니다.

input[type=checkbox] {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  visibility: hidden;
  font-size: 14px;
}

input[type=checkbox]:before {
  content: @fa-var-square-o;
  visibility: visible;
  /*font-size: 12px;*/
}

input[type=checkbox]:checked:before {
  content: @fa-var-check-square-o;
}

내 인터넷 검색에서 이것은 체크 박스 스타일링을위한 가장 쉬운 방법입니다. 그냥 추가 :after및 :checked:afterCSS 당신의 디자인을 기반으로.

body{
  background: #DDD;
}
span{
  margin-left: 30px;
}
input[type=checkbox] {
    cursor: pointer;
    font-size: 17px;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.5);
}

input[type=checkbox]:after {
    content: " ";
    background-color: #fff;
    display: inline-block;
    color: #00BFF0;
    width: 14px;
    height: 19px;
    visibility: visible;
    border: 1px solid #FFF;
    padding: 0 3px;
    margin: 2px 0;
    border-radius: 8px;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.08), 0 0 2px 0 rgba(0,0,0,0.16);
}

input[type=checkbox]:checked:after {
    content: "\2714";
    display: unset;
    font-weight: bold;
}
<input type="checkbox"> <span>Select Text</span>

순수 CSS를 사용하면 :before및 :after변환이 없는 멋진 것이 없으므로 다음 예제와 같이 기본 모양을 해제 한 다음 인라인 배경 이미지로 스타일을 지정할 수 있습니다. 이것은 Chrome, Firefox, Safari 및 이제 Edge (Chromium Edge)에서 작동합니다.

INPUT[type=checkbox]:focus
{
    outline: 1px solid rgba(0, 0, 0, 0.2);
}

INPUT[type=checkbox]
{
    background-color: #DDD;
    border-radius: 2px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 17px;
    height: 17px;
    cursor: pointer;
    position: relative;
    top: 5px;
}

INPUT[type=checkbox]:checked
{
    background-color: #409fd6;
    background: #409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}
<form>
  <label><input type="checkbox">I Agree To Terms &amp; Conditions</label>
</form>

간단하고 가벼운 템플릿 :

input[type=checkbox] {
  cursor: pointer;
}

input[type=checkbox]:checked:before {
  content: "\2713";
  background: #fffed5;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  font-size: 20px;
  text-align: center;
  line-height: 8px;
  display: inline-block;
  width: 13px;
  height: 15px;
  color: #00904f;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  margin: -3px -3px;
  text-indent: 1px;
}

input[type=checkbox]:before {
  content: "\202A";
  background: #ffffff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  font-size: 20px;
  text-align: center;
  line-height: 8px;
  display: inline-block;
  width: 13px;
  height: 15px;
  color: #00904f;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  margin: -3px -3px;
  text-indent: 1px;
}
<input type="checkbox" checked="checked">checked1<br>
<input type="checkbox">unchecked2<br>
<input type="checkbox" checked="checked" id="id1">
<label for="id1">checked2+label</label><br>
<label for="id2">unchecked2+label+rtl</label>
<input type="checkbox" id="id2">
<br>

https://jsfiddle.net/rvgccn5b/

가장 쉬운 방법은 a를 스타일링 label하고 checkbox보이지 않게 만드는 것입니다.

HTML

<input type="checkbox" id="first" />
<label for="first">&nbsp;</label>

CSS

checkbox {
  display: none;
}

checkbox + label {
  /* Style for checkbox normal */
  width: 16px;
  height: 16px;
}

checkbox::checked + label,
label.checked {
  /* Style for checkbox checked */
}

checkbox,이 숨겨진 경우에도, 여전히 액세스 할 수 및 양식이 제출 될 때 그 값이 전송됩니다. 이전 브라우저의 경우 label이전 버전의 Internet Explorer가 .NET ::checked에서 이해하지 못한다고 생각하므로 JavaScript를 사용하여 의 클래스를 변경해야 할 수 있습니다 checkbox.

이런! 이러한 모든 해결 방법으로 인해 스타일을 지정하려는 경우 HTML 확인란이 짜증 난다는 결론에 도달했습니다.

미리 경고하자면 이것은 CSS 구현이 아닙니다. 다른 사람이 유용하다고 생각할 경우를 대비하여 제가 생각 해낸 해결 방법을 공유 할 것이라고 생각했습니다.

HTML5 canvas요소를 사용했습니다 .

이것의 장점은 외부 이미지를 사용할 필요가 없으며 대역폭을 절약 할 수 있다는 것입니다.

단점은 어떤 이유로 브라우저가 올바르게 렌더링 할 수없는 경우 폴 백이 없다는 것입니다. 이것이 2017 년에도 여전히 문제가 될지는 논란의 여지가 있습니다.

최신 정보

이전 코드가 매우 추악하다는 것을 알았으므로 다시 작성하기로 결정했습니다.

Object.prototype.create = function(args){
    var retobj = Object.create(this);

    retobj.constructor(args || null);

    return retobj;
}

var Checkbox = Object.seal({
    width: 0,
    height: 0,
    state: 0,
    document: null,
    parent: null,
    canvas: null,
    ctx: null,

    /*
     * args:
     * name      default             desc.
     *
     * width     15                  width
     * height    15                  height
     * document  window.document     explicit document reference
     * target    this.document.body  target element to insert checkbox into
     */
    constructor: function(args){
        if(args === null)
            args = {};

        this.width = args.width || 15;
        this.height = args.height || 15;
        this.document = args.document || window.document;
        this.parent = args.target || this.document.body;
        this.canvas = this.document.createElement("canvas");
        this.ctx = this.canvas.getContext('2d');

        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.canvas.addEventListener("click", this.ev_click(this), false);
        this.parent.appendChild(this.canvas);
        this.draw();
    },

    ev_click: function(self){
        return function(unused){
            self.state = !self.state;
            self.draw();
        }
    },

    draw_rect: function(color, offset){
        this.ctx.fillStyle = color;
        this.ctx.fillRect(offset, offset,
                this.width - offset * 2, this.height - offset * 2);
    },

    draw: function(){
        this.draw_rect("#CCCCCC", 0);
        this.draw_rect("#FFFFFF", 1);

        if(this.is_checked())
            this.draw_rect("#000000", 2);
    },

    is_checked: function(){
        return !!this.state;
    }
});

다음은 작동하는 데모 입니다.

새 버전은 프로토 타입과 차등 상속을 사용하여 확인란을 만드는 효율적인 시스템을 만듭니다. 체크 박스를 생성하려면 :

var my_checkbox = Checkbox.create();

그러면 DOM에 체크 박스가 즉시 추가되고 이벤트가 연결됩니다. 체크 박스 선택 여부를 조회하려면

my_checkbox.is_checked(); // True if checked, else false

또한 중요한 것은 내가 루프를 제거했다는 것입니다.

업데이트 2

지난 업데이트에서 언급하지 않은 점은 캔버스를 사용하면 원하는 모양의 확인란을 만드는 것보다 더 많은 이점이 있다는 것입니다. 원하는 경우 다중 상태 확인란을 만들 수도 있습니다 .

Object.prototype.create = function(args){
    var retobj = Object.create(this);

    retobj.constructor(args || null);

    return retobj;
}

Object.prototype.extend = function(newobj){
    var oldobj = Object.create(this);

    for(prop in newobj)
        oldobj[prop] = newobj[prop];

    return Object.seal(oldobj);
}

var Checkbox = Object.seal({
    width: 0,
    height: 0,
    state: 0,
    document: null,
    parent: null,
    canvas: null,
    ctx: null,

    /*
     * args:
     * name      default             desc.
     *
     * width     15                  width
     * height    15                  height
     * document  window.document     explicit document reference
     * target    this.document.body  target element to insert checkbox into
     */
    constructor: function(args){
        if(args === null)
            args = {};

        this.width = args.width || 15;
        this.height = args.height || 15;
        this.document = args.document || window.document;
        this.parent = args.target || this.document.body;
        this.canvas = this.document.createElement("canvas");
        this.ctx = this.canvas.getContext('2d');

        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.canvas.addEventListener("click", this.ev_click(this), false);
        this.parent.appendChild(this.canvas);
        this.draw();
    },

    ev_click: function(self){
        return function(unused){
            self.state = !self.state;
            self.draw();
        }
    },

    draw_rect: function(color, offsetx, offsety){
        this.ctx.fillStyle = color;
        this.ctx.fillRect(offsetx, offsety,
                this.width - offsetx * 2, this.height - offsety * 2);
    },

    draw: function(){
        this.draw_rect("#CCCCCC", 0, 0);
        this.draw_rect("#FFFFFF", 1, 1);
        this.draw_state();
    },

    draw_state: function(){
        if(this.is_checked())
            this.draw_rect("#000000", 2, 2);
    },

    is_checked: function(){
        return this.state == 1;
    }
});

var Checkbox3 = Checkbox.extend({
    ev_click: function(self){
        return function(unused){
            self.state = (self.state + 1) % 3;
            self.draw();
        }
    },

    draw_state: function(){
        if(this.is_checked())
            this.draw_rect("#000000", 2, 2);

        if(this.is_partial())
            this.draw_rect("#000000", 2, (this.height - 2) / 2);
    },

    is_partial: function(){
        return this.state == 2;
    }
});

Checkbox마지막 스 니펫에서 사용 된 부분을 약간 수정하여 좀 더 일반적이어서 3 가지 상태가있는 확인란으로 "확장"할 수 있도록했습니다. 여기 에 데모가 있습니다. 보시다시피 기본 제공 확인란보다 더 많은 기능이 이미 있습니다.

JavaScript와 CSS 중에서 선택할 때 고려해야 할 사항입니다.

오래되고 잘못 설계된 코드

작동 데모

먼저 캔버스를 설정합니다.

var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    checked = 0; // The state of the checkbox
canvas.width = canvas.height = 15; // Set the width and height of the canvas
document.body.appendChild(canvas);
document.body.appendChild(document.createTextNode(' Togglable Option'));

다음으로 캔버스 자체를 업데이트하는 방법을 고안하십시오.

(function loop(){
  // Draws a border
  ctx.fillStyle = '#ccc';
  ctx.fillRect(0,0,15,15);
  ctx.fillStyle = '#fff';
  ctx.fillRect(1, 1, 13, 13);
  // Fills in canvas if checked
  if(checked){
    ctx.fillStyle = '#000';
    ctx.fillRect(2, 2, 11, 11);
  }
  setTimeout(loop, 1000/10); // Refresh 10 times per second
})();

마지막 부분은 인터랙티브하게 만드는 것입니다. 다행히도 매우 간단합니다.

canvas.onclick = function(){
  checked = !checked;
}

이것은 JavaScript의 이상한 이벤트 처리 모델로 인해 IE에서 문제가 발생할 수 있습니다.

누군가에게 도움이되기를 바랍니다. 그것은 내 요구에 확실히 적합했습니다.

일반 CSS3로 체크 박스 스타일을 수정하고 JS & HTML 조작이 필요하지 않습니다. 

.form input[type="checkbox"]:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f096";
  opacity: 1 !important;
  margin-top: -25px;
  appearance: none;
  background: #fff;
}

.form input[type="checkbox"]:checked:before {
  content: "\f046";
}

.form input[type="checkbox"] {
  font-size: 22px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

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

JavaScript 또는 jQuery가 필요하지 않습니다 .

확인란 스타일을 간단하게 변경하십시오.

HTML

<input type="checkbox" id="option" />
<label for="option"> <span></span> Click me </label>

CSS

input[type="checkbox"] {
  display: none;
  border: none !important;
  box-shadow: none !important;
}

input[type="checkbox"] + label span {
  background: url(http://imgh.us/uncheck.png);
  width: 49px;
  height: 49px;
  display: inline-block;
  vertical-align: middle;
}

input[type="checkbox"]:checked + label span {
  background: url(http://imgh.us/check_2.png);
  width: 49px;
  height: 49px;
  vertical-align: middle;
}

다음은 JsFiddle 링크입니다 : https://jsfiddle.net/05y2bge3/

이것은 가장 간단한 방법이며이 스타일을 제공 할 확인란을 선택할 수 있습니다.

CSS :

.check-box input {
  display: none;
}

.check-box span:before {
  content: ' ';
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("unchecked.png");
}

.check-box input:checked + span:before {
  background: url("checked.png");
}

HTML :

<label class="check-box">
  <input type="checkbox">
  <span>Check box Text</span>
</label>

여기에 CSS / HTML 전용 버전이 있습니다. jQuery 나 JavaScript가 전혀 필요하지 않습니다. 간단하고 깨끗한 HTML과 정말 간단하고 짧은 CSS입니다.

다음은 JSFiddle입니다.

http://jsfiddle.net/v71kn3pr/

다음은 HTML입니다.

<div id="myContainer">
    <input type="checkbox" name="myCheckbox" id="myCheckbox_01_item" value="red" />
    <label for="myCheckbox_01_item" class="box"></label>
    <label for="myCheckbox_01_item" class="text">I accept the Terms of Use.</label>
</div>

다음은 CSS입니다.

#myContainer {
    outline: black dashed 1px;
    width: 200px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] {
    display: none;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:not(:checked) + label.box {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: black solid 1px;
    background: #FFF ;
    margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:checked + label.box {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: black solid 1px;
    background: #F00;
    margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] + label + label.text {
    font: normal 12px arial;
    display: inline-block;
    line-height: 27px;
    vertical-align: top;
    margin: 5px 0px;
}

이것은 개별 라디오 또는 체크 박스, 체크 박스 그 루프 및 라디오 버튼 그룹을 가질 수 있도록 조정할 수 있습니다.

이 html / css를 사용하면 레이블 클릭도 캡처 할 수 있으므로 레이블 만 클릭해도 확인란이 선택되고 선택 취소됩니다.

이 유형의 체크 박스 / 라디오 버튼은 모든 양식에서 완벽하게 작동하며 전혀 문제가 없습니다. PHP, ASP.NET (.aspx), JavaServer Faces 및 ColdFusion을 사용하여 테스트되었습니다 .

**Custom checkbox with css**  (WebKit browser solution only Chrome, Safari, Mobile browsers)

    <input type="checkbox" id="cardAccptance" name="cardAccptance" value="Yes">
    <label for="cardAccptance" class="bold"> Save Card for Future Use</label>

    /* The checkbox-cu */

    .checkbox-cu {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 0;
        cursor: pointer;
        font-size: 16px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }


    /* Hide the browser's default checkbox-cu */

    .checkbox-cu input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }


    /* Create a custom checkbox-cu */

    .checkmark {
        position: absolute;
        top: 4px;
        left: 0;
        height: 20px;
        width: 20px;
        background-color: #eee;
        border: 1px solid #999;
        border-radius: 0;
        box-shadow: none;
    }


    /* On mouse-over, add a grey background color */

    .checkbox-cu:hover input~.checkmark {
        background-color: #ccc;
    }


    /* When the checkbox-cu is checked, add a blue background */

    .checkbox-cu input:checked~.checkmark {
        background-color: transparent;
    }


    /* Create the checkmark/indicator (hidden when not checked) */

    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }


    /* Show the checkmark when checked */

    .checkbox-cu input:checked~.checkmark:after {
        display: block;
    }


    /* Style the checkmark/indicator */

    .checkbox-cu .checkmark::after {
        left: 7px;
        top: 3px;
        width: 6px;
        height: 9px;
        border: solid #28a745;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        z-index: 100;
    }

경고 : 작성 당시에는 다음 내용이 사실이지만 그 동안 상황이 진전되었습니다.

AFAIK 최신 브라우저는 기본 OS 컨트롤을 사용하여 확인란을 표시하므로 스타일을 지정할 방법이 없습니다.

input[type=checkbox].css-checkbox {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

input[type=checkbox].css-checkbox + label.css-label {
    padding-left: 20px;
    height: 15px;
    display: inline-block;
    line-height: 15px;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 15px;
    vertical-align: middle;
    cursor: pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
    background-position: 0 -15px;
}

.css-label{
    background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png);
}

아니요, 여전히 확인란 자체의 스타일을 지정할 수는 없지만 확인란 을 클릭하는 기능 을 유지하면서 환상을 스타일링하는 방법을 (마지막으로) 알아 냈습니다 . 즉, 커서가 완벽하지 않은 경우에도 텍스트를 선택하거나 드래그 앤 드롭을 트리거하지 않고 전환 할 수 있습니다!

이 솔루션은 라디오 버튼에도 적합합니다.

다음은 Internet Explorer 9, Firefox 30.0 및 Chrome 40.0.2214.91에서 작동하며 기본적인 예입니다. 여전히 배경 이미지 및 의사 요소와 함께 사용할 수 있습니다.

http://jsfiddle.net/o0xo13yL/1/

label {
    display: inline-block;
    position: relative; /* Needed for checkbox absolute positioning */
    background-color: #eee;
    padding: .5rem;
    border: 1px solid #000;
    border-radius: .375rem;
    font-family: "Courier New";
    font-size: 1rem;
    line-height: 1rem;
}

label > input[type="checkbox"] {
    display: block;
    position: absolute; /* Remove it from the flow */
    width: 100%;
    height: 100%;
    margin: -.5rem; /* Negative the padding of label to cover the "button" */
    cursor: pointer;
    opacity: 0; /* Make it transparent */
    z-index: 666; /* Place it on top of everything else */
}

label > input[type="checkbox"] + span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #000;
    margin-right: .5rem;
}

label > input[type="checkbox"]:checked + span {
    background-color: #666;
}

<label>
    <input type="checkbox" />
    <span>&nbsp;</span>Label text
</label>

Edge 및 Firefox와 같은 브라우저는 체크 박스 입력 태그에서 : before : after를 지원하지 않기 때문에 여기에 순수하게 HTML과 CSS를 사용한 대안이 있습니다. 물론 요구 사항에 따라 CSS를 편집해야합니다.

다음과 같이 확인란의 HTML을 만드십시오.

<div class='custom-checkbox'>
    <input type='checkbox' />
    <label>
        <span></span>
        Checkbox label
    </label>
</div>

색상 레이블을 변경하려면 확인란에이 스타일을 적용하십시오.

<style>
    .custom-checkbox {
        position: relative;
    }
    .custom-checkbox input{
        position: absolute;
        left: 0;
        top: 0;
        height:15px;
        width: 50px;    /* Expand the checkbox so that it covers */
        z-index : 1;    /* the label and span, increase z-index to bring it over */
        opacity: 0;     /* the label and set opacity to 0 to hide it. */
    }
    .custom-checkbox input+label {
        position: relative;
        left: 0;
        top: 0;
        padding-left: 25px;
        color: black;
    }
    .custom-checkbox input+label span {
        position: absolute;  /* a small box to display as checkbox */
        left: 0;
        top: 0;
        height: 15px;
        width: 15px;
        border-radius: 2px;
        border: 1px solid black;
        background-color: white;
    }
    .custom-checkbox input:checked+label { /* change label color when checked */
        color: orange;
    }
    .custom-checkbox input:checked+label span{ /* change span box color when checked */
        background-color: orange;
        border: 1px solid orange;
    }
</style>

CSS 만 사용하여 회색조의 확인란 색상을 변경할 수있는 것 같습니다.

다음은 체크 박스를 검은 색에서 회색으로 변환합니다 (원하는대로).

input[type="checkbox"] {
    opacity: .5;
}

appearance: none최신 브라우저에서 간단히 사용할 수 있으므로 기본 스타일링이없고 모든 스타일이 올바르게 적용됩니다.

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 2em;
  height: 2em;
  border: 1px solid gray;
  outline: none;
  vertical-align: middle;
}

input[type=checkbox]:checked {
  background-color: blue;
}

iCheck 를 사용할 수 있습니다 . jQuery 및 Zepto에 대한 사용자 정의 확인란 및 라디오 버튼이며 아마도 도움이 될 것입니다.

icheck.js 전에 jQuery v1.7 +가로드되었는지 확인하십시오.

  1. 색 구성표를 선택하면 10 가지 스타일을 사용할 수 있습니다.
    • 검정 — minimal.css
    • 빨간색 — red.css
    • 녹색 — green.css
    • 파란색 — blue.css
    • Aero — aero.css
    • 회색 — grey.css
    • Orange — orange.css
    • 노란색 — yellow.css
    • Pink — pink.css
    • Purple — purple.css
  2. / skins / minimal / 폴더와 icheck.js 파일을 사이트에 복사합니다.

  3. HTML 앞에 삽입하십시오 (your-path 및 color-scheme 대체) :

    <link href="your-path/minimal/color-scheme.css" rel="stylesheet">
<script src="your-path/icheck.js"></script>

    빨간색 구성표의 예 :

    <link href="your-path/minimal/red.css" rel="stylesheet">
<script src="your-path/icheck.js"></script>

  4. HTML에 몇 가지 체크 박스와 라디오 버튼을 추가합니다.

    <input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>

  5. HTML에 JavaScript를 추가하여 iCheck 플러그인을 시작하십시오.

    <script>
    $(document).ready(function(){
      $('input').iCheck({
        checkboxClass: 'icheckbox_minimal',
        radioClass: 'iradio_minimal',
        increaseArea: '20%' // Optional
      });
   });
</script>

  6. 검은 색 구성표와 다른 경우 다음 코드를 사용하십시오 (빨간색의 예).

    <script>
    $(document).ready(function(){
      $('input').iCheck({
        checkboxClass: 'icheckbox_minimal-red',
        radioClass: 'iradio_minimal-red',
        increaseArea: '20%' // Optional
      });
   });
</script>

  7. 끝난

텍스트 앞에 아이콘을 추가하는 빠른 수정 :

< asp:CheckBox... Text="< img src='/link/to/img.png' />My Text" />

참고 URL : https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css

반응형

'program story' 카테고리의 다른 글

컨테이너 하단에 div를 배치하려면 어떻게해야합니까?  (0) 2020.09.30
목록을 문자열로 변환하는 방법  (0) 2020.09.30
Google API의 "최신"jQuery 라이브러리에 대한 링크가 있습니까?  (0) 2020.09.29
이미 원격 브랜치에 푸시 된 병합 커밋을 되 돌리는 방법은 무엇입니까?  (0) 2020.09.29
.gitignore 및 "체크 아웃시 다음 추적되지 않는 작업 트리 파일을 덮어 씁니다."  (0) 2020.09.29

'program story'의 다른글

  • 현재글CSS를 사용하여 체크 박스 스타일을 지정하는 방법

관련글

댓글

티스토리툴바