1/* 2.checkbox { 3 padding-left: 20px; 4} 5.checkbox label { 6 display: inline-block; 7 vertical-align: middle; 8 position: relative; 9 padding-left: 5px; 10} 11.checkbox label::before { 12 content: ""; 13 display: inline-block; 14 position: absolute; 15 width: 17px; 16 height: 17px; 17 left: 0; 18 margin-left: -20px; 19 border: 1px solid #cccccc; 20 border-radius: 3px; 21 background-color: #fff; 22 -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; 23 -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; 24 transition: border 0.15s ease-in-out, color 0.15s ease-in-out; 25} 26.checkbox label::after { 27 display: inline-block; 28 position: absolute; 29 width: 16px; 30 height: 16px; 31 left: 0; 32 top: 0; 33 margin-left: -20px; 34 padding-left: 3px; 35 padding-top: 1px; 36 font-size: 11px; 37 color: #555555; 38 line-height: 1.4; 39} 40.checkbox input[type="checkbox"], 41.checkbox input[type="radio"] { 42 opacity: 0; 43 z-index: 1; 44 cursor: pointer; 45} 46.checkbox input[type="checkbox"]:focus + label::before, 47.checkbox input[type="radio"]:focus + label::before { 48 outline: thin dotted; 49 outline: 5px auto -webkit-focus-ring-color; 50 outline-offset: -2px; 51} 52.checkbox input[type="checkbox"]:checked + label::after, 53.checkbox input[type="radio"]:checked + label::after { 54 font-family: "FontAwesome"; 55 content: "\f00c"; 56} 57.checkbox input[type="checkbox"]:indeterminate + label::after, 58.checkbox input[type="radio"]:indeterminate + label::after { 59 display: block; 60 content: ""; 61 width: 10px; 62 height: 3px; 63 background-color: #555555; 64 border-radius: 2px; 65 margin-left: -16.5px; 66 margin-top: 7px; 67} 68.checkbox input[type="checkbox"]:disabled, 69.checkbox input[type="radio"]:disabled { 70 cursor: not-allowed; 71} 72.checkbox input[type="checkbox"]:disabled + label, 73.checkbox input[type="radio"]:disabled + label { 74 opacity: 0.65; 75} 76.checkbox input[type="checkbox"]:disabled + label::before, 77.checkbox input[type="radio"]:disabled + label::before { 78 background-color: #eeeeee; 79 cursor: not-allowed; 80} 81.checkbox.checkbox-circle label::before { 82 border-radius: 50%; 83} 84.checkbox.checkbox-inline { 85 margin-top: 0; 86} 87 88.checkbox-primary input[type="checkbox"]:checked + label::before, 89.checkbox-primary input[type="radio"]:checked + label::before { 90 background-color: #337ab7; 91 border-color: #337ab7; 92} 93.checkbox-primary input[type="checkbox"]:checked + label::after, 94.checkbox-primary input[type="radio"]:checked + label::after { 95 color: #fff; 96} 97 98.checkbox-danger input[type="checkbox"]:checked + label::before, 99.checkbox-danger input[type="radio"]:checked + label::before { 100 background-color: #d9534f; 101 border-color: #d9534f; 102} 103.checkbox-danger input[type="checkbox"]:checked + label::after, 104.checkbox-danger input[type="radio"]:checked + label::after { 105 color: #fff; 106} 107 108.checkbox-info input[type="checkbox"]:checked + label::before, 109.checkbox-info input[type="radio"]:checked + label::before { 110 background-color: #5bc0de; 111 border-color: #5bc0de; 112} 113.checkbox-info input[type="checkbox"]:checked + label::after, 114.checkbox-info input[type="radio"]:checked + label::after { 115 color: #fff; 116} 117 118.checkbox-warning input[type="checkbox"]:checked + label::before, 119.checkbox-warning input[type="radio"]:checked + label::before { 120 background-color: #f0ad4e; 121 border-color: #f0ad4e; 122} 123.checkbox-warning input[type="checkbox"]:checked + label::after, 124.checkbox-warning input[type="radio"]:checked + label::after { 125 color: #fff; 126} 127 128.checkbox-success input[type="checkbox"]:checked + label::before, 129.checkbox-success input[type="radio"]:checked + label::before { 130 background-color: #5cb85c; 131 border-color: #5cb85c; 132} 133.checkbox-success input[type="checkbox"]:checked + label::after, 134.checkbox-success input[type="radio"]:checked + label::after { 135 color: #fff; 136} 137 138.checkbox-primary input[type="checkbox"]:indeterminate + label::before, 139.checkbox-primary input[type="radio"]:indeterminate + label::before { 140 background-color: #337ab7; 141 border-color: #337ab7; 142} 143 144.checkbox-primary input[type="checkbox"]:indeterminate + label::after, 145.checkbox-primary input[type="radio"]:indeterminate + label::after { 146 background-color: #fff; 147} 148 149.checkbox-danger input[type="checkbox"]:indeterminate + label::before, 150.checkbox-danger input[type="radio"]:indeterminate + label::before { 151 background-color: #d9534f; 152 border-color: #d9534f; 153} 154 155.checkbox-danger input[type="checkbox"]:indeterminate + label::after, 156.checkbox-danger input[type="radio"]:indeterminate + label::after { 157 background-color: #fff; 158} 159 160.checkbox-info input[type="checkbox"]:indeterminate + label::before, 161.checkbox-info input[type="radio"]:indeterminate + label::before { 162 background-color: #5bc0de; 163 border-color: #5bc0de; 164} 165 166.checkbox-info input[type="checkbox"]:indeterminate + label::after, 167.checkbox-info input[type="radio"]:indeterminate + label::after { 168 background-color: #fff; 169} 170 171.checkbox-warning input[type="checkbox"]:indeterminate + label::before, 172.checkbox-warning input[type="radio"]:indeterminate + label::before { 173 background-color: #f0ad4e; 174 border-color: #f0ad4e; 175} 176 177.checkbox-warning input[type="checkbox"]:indeterminate + label::after, 178.checkbox-warning input[type="radio"]:indeterminate + label::after { 179 background-color: #fff; 180} 181 182.checkbox-success input[type="checkbox"]:indeterminate + label::before, 183.checkbox-success input[type="radio"]:indeterminate + label::before { 184 background-color: #5cb85c; 185 border-color: #5cb85c; 186} 187 188.checkbox-success input[type="checkbox"]:indeterminate + label::after, 189.checkbox-success input[type="radio"]:indeterminate + label::after { 190 background-color: #fff; 191} 192*/ 193 194.radio { 195 padding-left: 20px; 196} 197.radio label { 198 display: inline-block; 199 vertical-align: middle; 200 position: relative; 201 padding-left: 5px; 202} 203.radio label::before { 204 content: ""; 205 display: inline-block; 206 position: absolute; 207 width: 17px; 208 height: 17px; 209 left: 0; 210 margin-left: -20px; 211 border: 1px solid #cccccc; 212 border-radius: 50%; 213 background-color: #fff; 214 -webkit-transition: border 0.15s ease-in-out; 215 -o-transition: border 0.15s ease-in-out; 216 transition: border 0.15s ease-in-out; 217} 218.radio label::after { 219 display: inline-block; 220 position: absolute; 221 content: " "; 222 width: 11px; 223 height: 11px; 224 left: 4px; 225 top: 4px; 226 margin-left: -20px; 227 border-radius: 50%; 228 background-color: #555555; 229 -webkit-transform: scale(0, 0); 230 -ms-transform: scale(0, 0); 231 -o-transform: scale(0, 0); 232 transform: scale(0, 0); 233 -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); 234 -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); 235 -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); 236 transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); 237} 238.radio input[type="radio"] { 239 opacity: 0; 240 z-index: 1; 241 cursor: pointer; 242} 243.radio input[type="radio"]:focus + label::before { 244 outline: thin dotted; 245 outline: 5px auto -webkit-focus-ring-color; 246 outline-offset: -2px; 247} 248.radio input[type="radio"]:checked + label::after { 249 -webkit-transform: scale(1, 1); 250 -ms-transform: scale(1, 1); 251 -o-transform: scale(1, 1); 252 transform: scale(1, 1); 253} 254.radio input[type="radio"]:disabled { 255 cursor: not-allowed; 256} 257.radio input[type="radio"]:disabled + label { 258 opacity: 0.65; 259} 260.radio input[type="radio"]:disabled + label::before { 261 cursor: not-allowed; 262} 263.radio.radio-inline { 264 margin-top: 0; 265} 266 267.radio-primary input[type="radio"] + label::after { 268 background-color: #337ab7; 269} 270.radio-primary input[type="radio"]:checked + label::before { 271 border-color: #337ab7; 272} 273.radio-primary input[type="radio"]:checked + label::after { 274 background-color: #337ab7; 275} 276 277.radio-danger input[type="radio"] + label::after { 278 background-color: #d9534f; 279} 280.radio-danger input[type="radio"]:checked + label::before { 281 border-color: #d9534f; 282} 283.radio-danger input[type="radio"]:checked + label::after { 284 background-color: #d9534f; 285} 286 287.radio-info input[type="radio"] + label::after { 288 background-color: #5bc0de; 289} 290.radio-info input[type="radio"]:checked + label::before { 291 border-color: #5bc0de; 292} 293.radio-info input[type="radio"]:checked + label::after { 294 background-color: #5bc0de; 295} 296 297.radio-warning input[type="radio"] + label::after { 298 background-color: #f0ad4e; 299} 300.radio-warning input[type="radio"]:checked + label::before { 301 border-color: #f0ad4e; 302} 303.radio-warning input[type="radio"]:checked + label::after { 304 background-color: #f0ad4e; 305} 306 307.radio-success input[type="radio"] + label::after { 308 background-color: #5cb85c; 309} 310.radio-success input[type="radio"]:checked + label::before { 311 border-color: #5cb85c; 312} 313.radio-success input[type="radio"]:checked + label::after { 314 background-color: #5cb85c; 315} 316 317/* input[type="checkbox"].styled:checked + label:after, */ 318input[type="radio"].styled:checked + label:after { 319 font-family: 'FontAwesome'; 320 content: "\f00c"; 321} 322/* input[type="checkbox"] .styled:checked + label::before, */ 323input[type="radio"] .styled:checked + label::before { 324 color: #fff; 325} 326/* input[type="checkbox"] .styled:checked + label::after, */ 327input[type="radio"] .styled:checked + label::after { 328 color: #fff; 329} 330