티스토리 뷰
웹접근성 지킨 라디오, 체크박스 라이브러리
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>체크박스와 라디오</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://limjungk.cafe24.com/dist/icheck.js"></script>
<style>
/* 기본속성 */
* { margin: 0; padding: 0; font-family: '맑은 고딕'; box-sizing:border-box;}
button { border:0 none; padding:0; margin:0; font-size:100%; color:#000; vertical-align:middle; background:transparent; cursor:pointer;}
body { padding: 20px;}
ul, ol { list-style: none;}
/* 공통 */
.icheckbox,
.iradio { position:absolute; top: 0; left: 0; min-width: 24px; min-height: 24px;}
.focus { outline: 1px solid #000 !important}
/* 체크박스 */
.checkboxGroup { display: flex; margin-top: 10px;}
.checkboxGroup li ~ li { margin-left: 20px;}
.checkboxGroup .checkboxBox { display: inline-block; position: relative; min-height: 24px; padding-left: 30px;}
.checkboxGroup input,
.checkboxGroup ins { top: 0 !important; left: 0 !important; z-index: 1; width: 24px !important; height: 24px !important; opacity: 0 !important; cursor: pointer;}
.checkboxGroup label { font-size: 14px; cursor: pointer;}
.checkboxGroup label::before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border: 1px solid #ddd; background: url(https://limjungk.cafe24.com/dist/icoCheck.png) no-repeat; border-radius: 50%; transition: background-color .2s ease-in-out;}
.checkboxGroup .checked +label::before { border-color: #e13962; background-color: #ef4d74; background-position-x: -24px;}
.checkboxGroup .disabled,
.checkboxGroup .disabled +label { cursor: not-allowed;}
.checkboxGroup .disabled +label::before { border-color: #e5e5e5; background-color: #ccc;}
/* 라디오 */
.radiogroup { display: flex; margin-top: 10px;}
.radiogroup li ~ li { margin-left: 20px;}
.radiogroup .radioBox { display: inline-block; position: relative; min-height: 24px; padding-left: 30px;}
.radiogroup input { position: absolute; top: 0; left: 0; z-index: 1; width: 24px; height: 24px; opacity: 0 !important; cursor: pointer;}
.radiogroup label { font-size: 14px; cursor: pointer;}
.radiogroup label::before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border: 1px solid #ddd; background-color: #eee; border-radius: 50%; transition: background-color .2s ease-in-out;}
.radiogroup label::after { content: ''; display: block; position: absolute; left: 7px; top: 7px; width: 8px; height: 8px; border: 1px solid #ddd; background-color: #fff; border-radius: 50%;}
.radiogroup .checked +label::before { border-color: #e13962; background-color: #ef4d74;}
.radiogroup .checked +label::after { border-color: #e13962;}
.radiogroup .disabled,
.radiogroup .disabled +label { cursor: not-allowed;}
.radiogroup .disabled +label::before { border-color: #bbb; background-color: #ccc;}
/* HiDPI support
@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
.checkboxGroup label::before {
background-image: url(https://limjungk.cafe24.com/dist/icoCheck@2x.png);
-webkit-background-size: 96px 48px;
background-size: 96px 48px;
}
}
*/
/* 박스형 디자인 */
.groupBoxStyle >div,
.groupBoxStyle >div ul li { margin-top: 15px;}
.groupBoxStyle { margin-top: 10px;}
.groupBoxStyle .icheckbox_line { position: relative; display: block; width: 400px; margin: 0; padding: 25px 15px 25px 50px; font-size: 13px; line-height: 17px; background: #fff; border: 1px solid #ddd; border-radius: 6px; transition: all .2s ease-in-out; cursor: pointer;}
.groupBoxStyle .icheckbox_line label { font-size: 16px;}
.groupBoxStyle .icheckbox_line label::before { content: ''; display: block; position: absolute; left: 15px; top: 50%; width: 22px; height: 22px; margin-top: -11px;; border: 1px solid #ddd; background: url(https://limjungk.cafe24.com/dist/icoCheck.png) no-repeat; border-radius: 50%; transition: background-color .2s ease-in-out;}
.groupBoxStyle .icheckbox_line.hover,
.groupBoxStyle .icheckbox_line.checked { border-color: #000; box-shadow: 1px 3px 6px rgb(0 0 0 / 10%);}
.groupBoxStyle .icheckbox_line.checked label { font-weight: 700;}
.groupBoxStyle .icheckbox_line.checked label::before { border-color: #e13962; background-color: #ef4d74; background-position-x: -24px;}
.groupBoxStyle .icheckbox_line.disabled { background-color: #f5f5f5;}
.groupBoxStyle .icheckbox_line.disabled label { color: #999;}
.groupBoxStyle .icheckbox_line.disabled label::before { border-color: #e5e5e5; background-color: #ccc;}
.groupBoxStyle .icheckbox_line.checked.disabled { border-color: #aaa;}
.groupBoxStyle .icheckbox_line.checked.disabled label { color: #666;}
.groupBoxStyle .iradio_line { position: relative; display: block; width: 400px; margin: 0; padding: 25px 15px 25px 50px; font-size: 13px; line-height: 17px; background: #fff; border: 1px solid #ddd; border-radius: 6px; transition: all .2s ease-in-out; cursor: pointer;}
.groupBoxStyle .iradio_line label { font-size: 16px;}
.groupBoxStyle .iradio_line label::before { content: ''; display: block; position: absolute; left: 15px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border: 1px solid #ddd; background-color: #eee; border-radius: 50%; transition: background-color .2s ease-in-out;}
.groupBoxStyle .iradio_line label::after { content: ''; display: block; position: absolute; left: 22px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border: 1px solid #ddd; background-color: #fff; border-radius: 50%;}
.groupBoxStyle .iradio_line.hover,
.groupBoxStyle .iradio_line.checked { border-color: #000; box-shadow: 1px 3px 6px rgb(0 0 0 / 10%);}
.groupBoxStyle .iradio_line.checked label { font-weight: 700;}
.groupBoxStyle .iradio_line.checked label::before { border-color: #e13962; background-color: #ef4d74; background-position-x: -24px;}
.groupBoxStyle .iradio_line.checked label::after { border-color: #e13962;}
.groupBoxStyle .iradio_line.disabled,
.groupBoxStyle .iradio_line.disabled label { cursor: not-allowed;}
.groupBoxStyle .iradio_line.disabled label::before { border-color: #bbb; background-color: #ccc;}
</style>
</head>
<body>
<div id="wrap">
<h4>접근성을 지키는 체크박스 디자인</h4>
<div>
<ul class="groupBox checkboxGroup">
<li>
<div class="checkboxBox">
<input type="checkbox" id="checkbox1">
<label for="checkbox1">Checkbox 1</label>
</div>
</li>
<li>
<div class="checkboxBox checked">
<input type="checkbox" id="checkbox2" checked>
<label for="checkbox2">Checkbox 2</label>
</div>
</li>
<li>
<div class="checkboxBox disabled">
<input type="checkbox" id="checkbox-disabled" disabled>
<label for="checkbox-disabled">Disabled</label>
</div>
</li>
<li>
<div class="checkboxBox checked disabled">
<input type="checkbox" id="checkbox-disabled-checked" checked disabled>
<label for="checkbox-disabled-checked">Disabled & checked</label>
</div>
</li>
</ul>
</div>
<br><br><br>
<h4>접근성을 지키는 라디오박스 디자인</h4>
<ul class="groupBox radiogroup">
<li>
<div class="radioBox">
<input type="radio" id="radio1" name="radio">
<label for="radio1" class="">Radio button 1</label>
</div>
</li>
<li>
<div class="radioBox checked">
<input type="radio" id="radio2" name="radio" checked>
<label for="radio2" class="">Radio button 2</label>
</div>
</li>
<li>
<div class="radioBox disabled">
<input type="radio" id="radio-disabled" disabled>
<label for="radio-disabled">Disabled</label>
</div>
</li>
</ul>
<br><br><br>
<h4>박스형 디자인</h4>
<div class="groupBoxStyle">
<div>
<h5>체크박스</h5>
<ul>
<li>
<input type="checkbox" id="checkbox_box1">
<label for="checkbox_box1">체력 및 근력 향상을 위해서</label>
</li>
<li>
<input type="checkbox" id="checkbox_box2" checked>
<label for="checkbox_box2">일상에서 통증으로 인해 불편함을 느껴서</label>
</li>
<li>
<input type="checkbox" id="checkbox_box3" disabled>
<label for="checkbox_box3">체중을 감량하고 싶어서</label>
</li>
<li>
<input type="checkbox" id="checkbox_box4" disabled checked>
<label for="checkbox_box4">부위별 라인 관리를 하고 싶어서</label>
</li>
</ul>
</div>
<div>
<h5 class="test">라디오박스</h5>
<ul>
<li>
<input type="radio" name="boxRadio" id="radio_box1">
<label for="radio_box1">Radio button default</label>
</li>
<li>
<input type="radio" name="boxRadio" id="radio_box2" checked>
<label for="radio_box2">Radio button checked</label>
</li>
<li>
<input type="radio" name="boxRadio" id="radio_box3" disabled>
<label for="radio_box3">Radio button disabled</label>
</li>
</ul>
</div>
</div>
</div>
<script>
$(document).ready(function(){
// 라디오, 체크박스
$('.groupBox input').iCheck({
checkboxClass: 'icheckbox',
radioClass: 'iradio',
});
// 박스형 라디오, 체크박스
$('.groupBoxStyle input').each(function(){
var self = $(this),
label = self.next(),
label_text = label.detach();
// label.remove();
self.iCheck({
checkboxClass: 'icheckbox_line',
radioClass: 'iradio_line',
insert: label_text
});
});
});
</script>
</body>
</html>Checkboxes and radio buttons customization (jQuery and Zepto) plugin
iCheck is verified to work in Internet Explorer 6+, Firefox 2+, Opera 9+, Google Chrome and Safari browsers. Should also work in many others. Mobile browsers (like Opera mini, Chrome mobile, Safari mobile, Android browser, Silk and others) are also support
icheck.fronteed.com