强大的checkbox/radio

2013年的第二天，怎么也该写一篇了。

网上看了一个Slide讲如何使用checkbox/radio的:checked做一系列丰富的效果，发现这个小小的标签竟然能做的东西太多了，主要利用了checkbox/radio是否checked状态时的CSS选择器做一些只需要很少JS就能实现的效果。

1. 按钮组

Markup:

<div class=”btn-group” data-toggle=”buttons-checkbox”>
<input type=”checkbox” id=”group1″ data-toggle=”button”>
<label class=”btn btn-primary” for=”group1″>Left</label>

<input type=”checkbox” id=”group2″ data-toggle=”button”>
<label class=”btn btn-primary” for=”group2″>Middle</label>

<input type=”checkbox” id=”group3″ data-toggle=”button”>
<label class=”btn btn-primary” for=”group3″>Right</label>
</div>

CSS:

input[data-toggle]:checked + label,
input[data-toggle]:checked + label:active {
background-color: #0044CC;
color: #FFFFFF;
background-image: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset,
0 1px 2px rgba(0, 0, 0, 0.05);
outline: 0 none;
}
.btn-group > .btn:first-of-type {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
margin-left: 0;
}​

原理：结合checkbox/radio的选择状态美化checkbox/radio的label，实现类似ios上按钮组的效果。

2. 下拉菜单

Markup:

<ul class=”nav” role=”navigation” id=”dropdowns”>
<li class=”dropdown”>
<input type=”radio” name=”dropdowns” id=”dropdown1″>
<label for=”dropdown1″ class=”dropdown-toggle” onclick>
Dropdown
<b class=”caret”></b>
</label>

<ul class=”dropdown-menu” role=”menu”>
<li><a tabindex=”-1″ href=”#”>Action</a></li>
… more items
</ul>
<label for=”dismissdd” class=”dismiss-dd” onclick>Dismiss</label>
</li>
</ul>

CSS:

#dropdowns input[type="radio"] ~ .dismiss-dd {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
padding: 0 !important;
background: transparent !important;
line-height: 0;
cursor: default;
}

#dropdowns input[type="radio"]:checked ~ .dropdown-menu,
#dropdowns input[type="radio"]:checked ~ .dismiss-dd {
display: block;
}

原理：结合radio选择状态用兄弟选择器控制菜单显示与否。​

3. 折叠

Markup:

<input type=”radio” name=”accordion-group” id=”collapseAll”>
<div class=”accordion-group”>
<input type=”radio” id=”collapse1″ name=”accordion-group” checked>
<label for=”collapseAll” class=”accordion-dismiss”></label>

<div class=”accordion-heading”>
<label for=”collapse1″ class=”accordion-toggle”>Heading #1</label>
</div>
<div id=”collapseOne” class=”accordion-body collapse”>
<div class=”accordion-inner”>
…
</div>
</div>
</div>

CSS:

#collapse .accordion input ~ .collapse {
max-height: 0;
height: auto;
transition: max-height 0.2s ease 0s;
}
#collapse .accordion input:checked ~ .collapse {
max-height: 500px;
transition-duration: 0.7s;
}

原理：结合radio选择状态用兄弟选择器控制折叠内容显示与否，同时外层的radio控制取消所有折叠。

4. 模态对话框

Markup:

<!– Modal 1 –>
<label class=”btn” for=”modal1″ onclick>Launch ze modal</label>
<input type=”radio” id=”modal1″ name=”modal” />

<div class=”modal hide fade”>
<div class=”modal-header”>
<label role=”button” class=”close” for=”closemodal”>×</label>
<h3>Modal header</h3>
</div>
<div class=”modal-body”>…</div>
<div class=”modal-footer”>
<label role=”button” class=”close” for=”closemodal”>Close</label>
</div>
</div>

<!– Overlay and close –>
<input type=”radio” id=”closemodal” name=”modal” />
<label for=”closemodal” class=”modalclose”>&nbsp;</label>

CSS:

#modals input + .modal {
left: 50%;
margin: 0;
top: 0;
opacity: 0;
transition: transform 0.3s ease-in, opacity 0.3s linear;
transform: translate(-50%,-100%);
}
#modals input:checked + .modal {
opacity: 1;
transition-delay: 0.4s;
transform: translate(-50%,20%);
}
#modals input + .modalclose {
transition: opacity 0.3s linear;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
opacity: 0;
}
#modals input:not(#closemodal):checked ~ .modalclose {
opacity: 0.8;
z-index: 1;
background: #000;
margin: 0 !important;
transition-delay: 0;
}​

原理：结合radio选择状态用兄弟选择器控制对话框显示与否，模态层为label标签控制raido切换开关状态。

5. 幻灯片

Markup:

<input type=”radio” id=”slide1″ name=”slider” checked>
<input type=”radio” id=”slide2″ name=”slider”>

<div class=”slides”>
<div class=”carousel-inner”>
<div class=”item”>
<img src=”…” alt=”">
<div class=”carousel-caption”>
<h4>Pic 1</h4>
…
</div>
</div>
</div>
<div id=”controls”>
<label for=”slide1″>
<span>&lsaquo;</span><span>&rsaquo;</span>
</label>
<label for=”slide2″>
<span>&lsaquo;</span><span>&rsaquo;</span>
</label>
</div>

CSS:

见bootleg-carousel.css

原理：结合radio的选择状态用兄弟选择器控制幻灯主体内容显示与否，用子选择类型选择器控制箭头显示哪些箭头。

以上例子请看这个DEMO，同时Ryan Seddon也创建了一个使用:checked伪类制作JavaScript组件的库Bootleg，可以看看。

会遇到的Bug是Safari5.1和Chrome13之前的版本不支持下面这种情况：

// Off
input[type="checkbox"] ~ div {
// Fancy styles
}

// On
input[type="checkbox"]:checked ~ div {
// Fancy styles
}

ios5以下的Safari需要onclick属性才能在点击label时选中checkbox/radio

<input type=”checkbox” id=”foo”>
<label onclick=”" for=”foo”>I need an onclick in iOS</label>

国内也有人利用这个技术做了一个类似Path的DEMO，这里http://sandbox.runjs.cn/show/boi7xnyd

更多演示：

• Navigation knob
• Rotating menu
• Fancy button switches
• Rule 110 cellular automaton
• Responsive image slider