ionic的checkbox分析
之前分析了一个原生的checkbox,趁热打铁分析ionic的自带checkbox.
html
<label class="checkbox"> <input type="checkbox">check </label>
css
- checkbox
.checkbox { position: relative; display: inline-block; padding: 7px 7px; cursor: pointer; }
定义了一个父节点。display: inline-block;
此元素会被显示为内联元素,元素前后没有换行符。
- checkbox子节点input:before
.checkbox input:before{ display: table; width: 100%; height: 100%; border-color: #ddd; border-width: 1px; border-style: solid; border-radius: 28px; background: #fff; content: ' '; -webkit-transition: background-color 20ms ease-in-out; transition: background-color 20ms ease-in-out; }
display:table;
让元素的子节点像table元素一样。
使用基于表格的CSS布局,使我们能够轻松定义一个单元格的边界、背景等样式,而不会产生因为使用了table那样的制表标签所导致的语义化问题。width: 100%;height: 100%;
高度宽度。
border-color: #ddd;border-width: 1px;border-style: solid;border-radius: 28px;
定义一个圆形的边框,浅灰色。transition: background-color 20ms ease-in-out;
这是一个CSS3过渡效果。即背景颜色有2ms的过度。
综上,input:before只是给了一个边框的效果。
- checkbox子节点input:after
.checkbox input:after{ -webkit-transition: opacity 0.05s ease-in-out; transition: opacity 0.05s ease-in-out; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; top: 33%; left: 25%; display: table; width: 14px; height: 6px; border: 1px solid #fff; border-top: 0; border-right: 0; content: ' '; opacity: 0; }
这个就是那个checked后显示的对号。transition: opacity 0.05s ease-in-out;
表示一个透明度的渐变。ease-in-out:
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果;
ease-in 规定以慢速开始的过渡效果;
ease-out 规定以慢速结束的过渡效果;
ease-in-out 规定以慢速开始和结束的过渡效果transform: rotate(-45deg);
旋转45度。
后面的其实就在弄出“对号”
checkbox子元素Input:checked:before
.checkbox input:checked:before { background: #387ef5; border-color: #387ef5; border-width: 2px; }
当checked时,Input:before
的背景颜色和边框颜色都是蓝色。
checkbox子元素Input:checked:after
.checkbox input:checked:after{ opacity: 1; }
当checked时,input:after
透明度为0(显示那个“对号”).
结论
综上所述,Input:before
是一个边框效果input:after
是一个“对号”效果
当checked
时,input:after
(对号)显示,Input:before
(原来的灰色边框)的背景和边框都变为蓝色。