关于checkbox 样式的改变 设置自定义样式
Posted 橘子红
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于checkbox 样式的改变 设置自定义样式相关的知识，希望对你有一定的参考价值。
关于表单中checkbox的样式，传统的不好看 。本样式为===选中为天蓝色框 白色对号 ===不选为蓝色框
本文包括html 页面结构 css样式 关于json数据带入在下一篇做出介绍
1.页面部分
结构如下：但就关系网络（这里借鉴阿里的某个产品）这个页面来说 ，首先关系网络下为一级标题 下有二级三级标题 并带有收起展开操作 由于数据通过后台请求的json数据 所以页面编写应结构清晰一致，方便后面在js中拼接数据：
1 <div class="kuai"> //对于每一个模块 用一个div 括起
//---------------------------------------------------------关系网络头部分 tree-title
2 <div class="row row-box tree-title"> 3 <span class="h4 yjtitle" >关系网路</span> <span class="qiyongSpan"> 4 <label class="ant-checkbox-wrapper"> 5 <span class="ant-checkbox ant-checkbox-checked"> 6 <input type="checkbox" class="ant-checkbox-input" value="" name=""></input> 7 <span class="ant-checkbox-inner"></span> 8 </span> 9 <span>启用</span> 10 </label> 11 </span> 12 <button class="btn btn-info rt" style="margin-top: 0%; margin-right: 2%;" id="shouqi">收起</button> 13 14 </div>
//--------------------------------------------------------关系网络的主体部分 tree-body
15 16 <div class="tree-body">
//-------------------------------------------每一个二级标题 用cbt-item
17 <div class="cbt-item"> 18 <div class="cbt-item-h"> 19 <label class="ant-checkbox-wrapper"> <span 20 class="ant-checkbox ant-checkbox-checked"> <input 21 type="checkbox" class="ant-checkbox-input" value=""></input> <span 22 class="ant-checkbox-inner"></span> 23 </span> <span>数据导入</span> 24 </label> 25 </div> 26 <div class="cbt-root"></div>//如有三级 有一个就写一个cbt-root 27 </div>
//----------------------------------------每一个二级标题 用cbt-item
28 <div class="cbt-item"> 29 <div class="cbt-item-h"> 30 <label class="ant-checkbox-wrapper"> <span 31 class="ant-checkbox ant-checkbox-checked"> <input 32 type="checkbox" class="ant-checkbox-input" value=""></input> <span 33 class="ant-checkbox-inner"></span> 34 </span> <span>关联反查</span> 35 </label> 36 </div> 37 <div class="cbt-root"></div> 38 </div> 39 <div class="cbt-item"> 40 <div class="cbt-item-h"> 41 <label class="ant-checkbox-wrapper"> 42 <span 43 class="ant-checkbox ant-checkbox-checked"> 44 <input type="checkbox" class="ant-checkbox-input" value=""></input> 45 <span class="ant-checkbox-inner"></span> 46 </span> 47 <span>关联反查</span> 48 </label> 49 50 </div> 51 <div class="cbt-root">//三级选项 总体分布 52 <label class="cbt-root-c ant-checkbox-wrapper"> 53 <span 54 class="ant-checkbox ant-checkbox-checked"> 55 <input type="checkbox" class="ant-checkbox-input" value=""></input> 56 <span class="ant-checkbox-inner"></span> 57 </span> 58 <span>总体分布</span> 59 </label> 60 </div>
<div class="cbt-root"> //三级选项 对象属性统计 52 <label class="cbt-root-c ant-checkbox-wrapper"> 53 <span 54 class="ant-checkbox ant-checkbox-checked"> 55 <input type="checkbox" class="ant-checkbox-input" value=""></input> 56 <span class="ant-checkbox-inner"></span> 57 </span> 58 <span>对象属性统计</span> 59 </label> 60 </div>
61
62 </div>
63 </div>
//--------------------------------------------------------关系网络的主题部分
64 </div>//用div 包裹起来的块
具体到每个checkbox选项 结构都是一样的
//被选中的状态
<label class="ant-checkbox-wrapper">
<span class="ant-checkbox ant-checkbox-checked">
<input type="checkbox" class="ant-checkbox-input" value="" name=""></input>
<span class="ant-checkbox-inner"></span>
</span>
<span>启用</span>
</label>
//没被选中的状态
<label class="ant-checkbox-wrapper">
<span class="ant-checkbox">
<input type="checkbox" class="ant-checkbox-input" value="" name=""></input>
<span class="ant-checkbox-inner"></span>
</span>
<span>启用</span>
</label>
</div>
具体就是 ant-checkbox-checked 有没有加进去
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2.css部分
1 @CHARSET "UTF-8"; 2 .ant-checkbox { 3 white-space: nowrap; 4 cursor: pointer; 5 outline: none; 6 display: inline-block; 7 line-height: 1; 8 position: relative; 9 vertical-align: text-bottom; 10 } 11 12 .ant-checkbox-inner { 13 position: relative; 14 top: 0; 15 left: 0; 16 display: block; 17 width: 14px; 18 height: 14px; 19 border: 1px solid #d9d9d9; 20 border-radius: 2px; 21 background-color: #fff; 22 transition: all .3s; 23 } 24 25 .ant-checkbox-inner:after { 26 transform: rotate(45deg) scale(0); 27 position: absolute; 28 left: 4px; 29 top: 1px; 30 display: table; 31 width: 5px; 32 height: 8px; 33 border: 2px solid #fff; 34 border-top: 0; 35 border-left: 0; 36 content: \' \'; 37 transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6); 38 } 39 40 .ant-checkbox-input { 41 position: absolute; 42 left: 0; 43 z-index: 1; 44 cursor: pointer; 45 opacity: 0; 46 filter: alpha(opacity = 0); 47 top: 0; 48 bottom: 0; 49 right: 0; 50 width: 100%; 51 height: 100%; 52 } 53 54 .ant-checkbox-indeterminate .ant-checkbox-inner:after { 55 content: \' \'; 56 transform: scale(1); 57 position: absolute; 58 left: 2px; 59 top: 5px; 60 width: 8px; 61 height: 1px; 62 } 63 64 .ant-checkbox-checked .ant-checkbox-inner:after { 65 transform: rotate(45deg) scale(1); 66 position: absolute; 67 left: 4px; 68 top: 1px; 69 display: table; 70 width: 5px; 71 height: 8px; 72 border: 2px solid #fff; 73 border-top: 0; 74 border-left: 0; 75 content: \' \'; 76 transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s; 77 } 78 79 .ant-checkbox-checked .ant-checkbox-inner,.ant-checkbox-indeterminate .ant-checkbox-inner 80 { 81 background-color: #108ee9; 82 border-color: #108ee9; 83 } 84 85 .ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner:after { 86 animation-name: none; 87 border-color: rgba(0, 0, 0, 0.25); 88 } 89 90 .ant-checkbox-disabled .ant-checkbox-inner { 91 border-color: #d9d9d9 !important; 92 background-color: #f3f3f3; 93 } 94 95 .ant-checkbox-disabled .ant-checkbox-inner:after { 96 animation-name: none; 97 border-color: #f3f3f3; 98 } 99 100 .ant-checkbox-disabled+span { 101 color: rgba(0, 0, 0, 0.25); 102 cursor: not-allowed; 103 } 104 105 .ant-checkbox-wrapper { 106 cursor: pointer; 107 font-size: 12px; 108 display: inline-block; 109 } 110 111 .ant-checkbox-wrapper 112 :not 113 114 ( 115 :last-child 116 117 ) 118 { 119 margin-right:8px; 120 } 121 .ant-checkbox-wrapper+span,.ant-checkbox+span { 122 padding-left: 8px; 123 padding-right: 8px; 124 } 125 126 .ant-checkbox-group { 127 font-size: 12px; 128 } 129 130 .ant-checkbox-group-item { 131 display: inline-block; 132 } 133 134 @media \\0screen { 135 .ant-checkbox-checked .ant-checkbox-inner:before,.ant-checkbox-checked .ant-checkbox-inner:after 136 { 137 font-family: \'anticon\'; 138 text-rendering: optimizeLegibility; 139 -webkit-font-smoothing: antialiased; 140 -moz-osx-font-smoothing: grayscale; 141 content: "\\E632"; 142 font-weight: bold; 143 font-size: 8px; 144 border: 0; 145 color: #fff; 146 left: 2px; 147 top: 3px; 148 position: absolute; 149 } 150 } 151 152 .ant-collapse { 153 background-color: #f7f7f7; 154 border-radius: 4px; 155 border: 1px solid #d9d9d9; 156 border-bottom: 0; 157 } 158 159 .ant-collapse>.ant-collapse-item { 160 border-bottom: 1px solid #d9d9d9; 161 } 162 163 .ant-collapse>.ant-collapse-item>.ant-collapse-header { 164 height: 38px; 165 line-height: 38px; 166 padding-left: 32px; 167 color: rgba(0, 0, 0, 0.85); 168 cursor: pointer; 169 position: relative; 170 transition: all .3s; 171 } 172 173 .ant-collapse>.ant-collapse-item>.ant-collapse-header:active { 174 background-color: #eee !important; 175 } 176 177 .ant-collapse>.ant-collapse-item>.ant-collapse-header .arrow { 178 font-size: 12px; 179 font-size: 9px \\9; 180 transform: scale(0.75) rotate(0); 181 /* IE6-IE8 */ 182 -ms-filter: 183 "progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\', M11=1, M12=0, M21=0, M22=1)"; 184 zoom: 1; 185 font-style: normal; 186 vertical-align: baseline; 187 text-align: center; 188 text-transform: none; 189 line-height: 1; 190 text-rendering: optimizeLegibility; 191 -webkit-font-smoothing: antialiased; 192 -moz-osx-font-smoothing: grayscale; 193 position: absolute; 194 color: rgba(0, 0, 0, 0.43); 195 display: inline-block; 196 font-weight: bold; 197 line-height: 40px; 198 vertical-align: middle; 199 transition: transform 0.24s; 200 top: 0; 201 left: 16px; 202 /* stylelint-disable declaration-block-no-duplicate-properties */ 203 top: 16px \\9; 204 left: 0 \\9; 205 /* stylelint-enable declaration-block-no-duplicate-properties */ 206 } 207 208 :root .ant-collapse>.ant-collapse-item>.ant-collapse-header .arrow { 209 filter: none; 210 } 211 212 :root .ant-collapse>.ant-collapse-item>.ant-collapse-header .arrow { 213 font-size: 12px; 214 } 215 216 .ant-collapse>.ant-collapse-item>.ant-collapse-header .arrow:before { 217 display: block; 218 font-family: "anticon" !important; 219 } 220 221 .ant-collapse>.ant-collapse-item>.ant-collapse-header .arrow:before { 222 content: "\\E61F"; 223 } 224 225 .ant-collapse-anim-active { 226 transition: height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); 227 } 228 229 .ant-collapse-content { 230 overflow: hidden; 231 color: rgba(0, 0, 0, 0.65); 232 padding: 0 16px; 233 background-color: #fff; 234 } 235 236 .ant-collapse-content>.ant-collapse-content-box { 237 padding-top: 16px; 238 padding-bottom: 16px; 239 } 240 241 .ant-collapse-content-inactive { 242 display: none; 243 } 244 245 .ant-collapse-item:last-child>.ant-collapse-content { 246 border-radius: 0 0 4px 4px; 247 } 248 249 .ant-collapse>.ant-collapse-item>.ant-collapse-header[aria-expanded="true"] .arrow 250 { 251 display: inline-block; 252 font-size: 12px; 253 font-size: 9px \\9; 254 transform: scale(0.75) rotate(90deg); 255 /* IE6-IE8 */ 256 -ms-filter: 257 "progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\', M11=0.00000000000000006123, M12=-1, M21=1, M22=0.00000000000000006123)"; 258 zoom: 1; 259 } 260 261 :root .ant-collapse>.ant-collapse-item>.ant-collapse-header[aria-expanded="true"] .arrow 262 { 263 filter: none; 264 } 265 266 :root .ant-collapse>.ant-collapse-item>.ant-collapse-header[aria-expanded="true"] .arrow 267 { 268 font-size: 12px; 269 } 270 271 .ant-collapse-borderless { 272 background-color: #fff; 273 border: 0; 274 } 275 276 .ant-collapse-borderless>.ant-collapse-item-active { 277 border: 0; 278 } 279 280 .ant-collapse-borderless>.ant-collapse-item>.ant-collapse-content { 281 background-color: transparent; 282 border-top: 1px solid #d9d9d9; 283 } 284 285 .ant-collapse-borderless>.ant-collapse-item>.ant-collapse-header { 286 transition: all .3s; 287 } 288 289 .ant-collapse-borderless>.ant-collapse-item>.ant-collapse-header:hover { 290 background-color: #f7f7f7; 291 } 292 293 .ant-calendar-picker-container { 294 position: absolute; 295 z-index以上是关于关于checkbox 样式的改变 设置自定义样式的主要内容，如果未能解决你的问题，请参考以下文章