[英]Checkbox Styling based on CSS
我有一个复选框,应如下所示,
如果未选中,则应如下所示,
我有以下 css
input[type="checkbox"]:checked + label::after {
content: '';
position: absolute;
width: 11px;
height: 6px;
background: rgba(0,0,0,0);
top: 10px;
left: 24px;
border: 1px solid white;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
input[type="checkbox"] {
line-height: 2.1ex;
}
input[type="radio"],
input[type="checkbox"] {
position: absolute;
left: -999em;
}
input[type="checkbox"] + label {
position: relative;
overflow: hidden;
cursor: pointer;
}
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
vertical-align: -25%;
height: 20px;
width: 20px;
background-color: #1BAAD3;
border-radius: 4px;
margin-right: 8px;
}
当我取消选中复选框时,这是我可以看到的
我正在使用 angular-js 来处理选择/取消选择的事件
HTML
<div class="form-check">
<input type="checkbox" ng-if="testKits" ng-model="testKits" class="form-check-input" id="testKits">
<label class="form-check-label form-label-text source-sans-pro" for="testKits">{{'Testkits' | translate}}</label>
</div>
请参阅下面的代码片段,它可能对您有用:
input[type="checkbox"]:checked + label::after { content: ''; position: absolute; width: 11px; height: 6px; background: rgba(0,0,0,0); top: 0px; left: 6px; border: 1px solid white; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } input[type="checkbox"] { line-height: 2.1ex; } input[type="radio"], input[type="checkbox"] { position: absolute; left: -999em; } input[type="checkbox"] + label { position: relative; overflow: hidden; cursor: pointer; } input[type="checkbox"] + label::before { content: ""; display: inline-block; vertical-align: -25%; height: 20px; width: 20px; background-color: #fff; border-radius: 4px; margin-right: 8px; border: 2px solid #ddd; } input[type="checkbox"]:checked + label::before { background-color: #1BAAD3; border: 2px solid #1BAAD3; }
<div class="form-check"> <input type="checkbox" class="form-check-input" id="testKits"> <label class="form-check-label form-label-text source-sans-pro" for="testKits">abc</label> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.