关于checkbox样式的改变设置自定义样式

具体就是 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-wrapper112 :not113 114 (

115 :last-child116 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:after136 {

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\"] .arrow250 {

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\"] .arrow262 {

263 filter: none;264 }265

266 :root .ant-collapse>.ant-collapse-item>.ant-collapse-header[aria-expanded=\"true\"] .arrow267 {

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: 1050;296 }297

298 .ant-calendar-picker-container.slide-up-enter.slide-up-enter-active.ant-calendar-picker-container-placement-topLeft,.ant-calendar-picker-container.slide-up-enter.slide-up-enter-active.ant-calendar-picker-container-placement-topRight,.ant-calenda299 {

300 animation-name: antSlideDownIn;301 }302

303 .ant-calendar-picker-container.slide-up-enter.slide-up-enter-active.ant-calendar-picker-container-placement-bottomLeft,.ant-calendar-picker-container.slide-up-enter.slide-up-enter-active.ant-calendar-picker-container-placement-bottomRight,.ant-304 {

305 animation-name: antSlideUpIn;306 }307

308 .ant-calendar-picker-container.slide-up-leave.slide-up-leave-active.ant-calendar-picker-container-placement-topLeft,.ant-calendar-picker-container.slide-up-leave.slide-up-leave-active.ant-calendar-picker-container-placement-topRight309 {

310 animation-name: antSlideDownOut;311 }312

313 .ant-calendar-picker-container.slide-up-leave.slide-up-leave-active.ant-calendar-picker-container-placement-bottomLeft,.ant-calendar-picker-container.slide-up-leave.slide-up-leave-active.ant-calendar-picker-container-placement-bottomRight314 {

315 animation-name: antSlideUpOut;316 }317

318 .ant-calendar-picker {319 position: relative;320 display: inline-block;321 outline: none;322 font-size: 12px;

323 transition: opacity 0.3s;324 }

325

326 .ant-calendar-picker-input {327 outline: none;328 }329

330 .ant-calendar-picker331 :hover332

333 .ant-calendar-picker-input334 :not335 336 (337 [

338 disabled339 ]340 341 )342 {

343 border-color344 :345

346 #108ee9347 ;348 349 350 }

351 .ant-calendar-picker-clear {352 opacity: 0;

353 pointer-events: none;354 z-index: 1;

355 position: absolute;356 right: 7px;

357 background: #fff;358 top: 50%;

359 font-size: 12px;

360 color: rgba(0, 0, 0, 0.25);361 width: 14px;362 height: 14px;363 margin-top: -7px;364 line-height: 14px;365 cursor: pointer;

366 transition: color 0.3s, opacity 0.3s;367 }368

369 .ant-calendar-picker-clear:hover {370 color: rgba(0, 0, 0, 0.43);371 }372

373 .ant-calendar-picker:hover .ant-calendar-picker-clear {374 opacity: 1;

375 pointer-events: auto;376 }377

378 .ant-calendar-picker-icon {379 position: absolute;380 user-select: none;381 transition: all .3s;382 width: 12px;383 height: 12px;384 line-height: 12px;385 right: 8px;

386 color: rgba(0, 0, 0, 0.43);387 top: 50%;

388 margin-top: -6px;389 }390

391 .ant-calendar-picker-icon:after {392 content: \"\\E6BB\";393 font-family: \"anticon\";394 font-size: 12px;

395 color: rgba(0, 0, 0, 0.43);396 display: inline-block;397 line-height: 1;

398 vertical-align: bottom;399 }400

401 .ant-calendar {

402 position: relative;403 outline: none;404 width: 231px;

405 border: 1px solid #fff;406 list-style: none;407 font-size: 12px;408 text-align: left;

409 background-color: #fff;410 border-radius: 4px;

411 box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);412 background-clip: padding-box;413 line-height: 1.5;414 }415

416 .ant-calendar-input-wrap {417 height: 34px;418 padding: 6px;

419 border-bottom: 1px solid #e9e9e9;420 }421

422 .ant-calendar-input {423 border: 0;424 width: 100%;425 cursor: auto;426 outline: 0;427 height: 22px;

428 color: rgba(0, 0, 0, 0.65);429 }430

431 .ant-calendar-week-number {432 width: 286px;433 }434

435 .ant-calendar-week-number-cell {436 text-align: center;437 }438

439 .ant-calendar-header {440 height: 34px;441 line-height: 34px;442 text-align: center;443 user-select: none;

444 border-bottom: 1px solid #e9e9e9;445 }446

447 .ant-calendar-header a:hover {

448 color: #49a9ee;449 }450

451 .ant-calendar-header .ant-calendar-century-select,.ant-calendar-header .ant-calendar-decade-select,.ant-calendar-header .ant-calendar-year-select,.ant-calendar-header .ant-calendar-month-select452 {

453 padding: 0 2px;454 font-weight: bold;455 display: inline-block;456 color: rgba(0, 0, 0, 0.65);457 line-height: 34px;458 }459

460 .ant-calendar-header .ant-calendar-century-select-arrow,.ant-calendar-header .ant-calendar-decade-select-arrow,.ant-calendar-header .ant-calendar-year-select-arrow,.ant-calendar-header .ant-calendar-month-select-arrow461 {

462 display: none;463 }464

465 .ant-calendar-header .ant-calendar-prev-century-btn,.ant-calendar-header .ant-calendar-next-century-btn,.ant-calendar-header .ant-calendar-prev-decade-btn,.ant-calendar-header .ant-calendar-next-decade-btn,.ant-calendar-header .ant-calendar466 {

467 position: absolute;468 top: 0;

469 color: rgba(0, 0, 0, 0.43);

470 font-family: Arial, \"Hiragino Sans GB\471 \"Microsoft Sans Serif\;472 padding: 0 5px;473 font-size: 16px;

474 display: inline-block;475 line-height: 34px;476 }477

478 .ant-calendar-header .ant-calendar-prev-century-btn,.ant-calendar-header .ant-calendar-prev-decade-btn,.ant-calendar-header .ant-calendar-prev-year-btn479 {

480 left: 7px;481 }482

483 .ant-calendar-header .ant-calendar-prev-century-btn:after,.ant-calendar-header .ant-calendar-prev-decade-btn:after,.ant-calendar-header .ant-calendar-prev-year-btn:after484 {

485 content: '\\AB';486 }487

488 .ant-calendar-header .ant-calendar-next-century-btn,.ant-calendar-header .ant-calendar-next-decade-btn,.ant-calendar-header .ant-calendar-next-year-btn489 {

490 right: 7px;491 }492

493 .ant-calendar-header .ant-calendar-next-century-btn:after,.ant-calendar-header .ant-calendar-next-decade-btn:after,.ant-calendar-header .ant-calendar-next-year-btn:after494 {

495 content: '\\BB';496 }497

498 .ant-calendar-header .ant-calendar-prev-month-btn {499 left: 29px;500 }501

502 .ant-calendar-header .ant-calendar-prev-month-btn:after {503 content: '\\2039';504 }505

506 .ant-calendar-header .ant-calendar-next-month-btn {507 right: 29px;508 }509

510 .ant-calendar-header .ant-calendar-next-month-btn:after {511 content: '\\203A';512 }513

514 .ant-calendar-body {515 padding: 4px 8px;516 }517

518 .ant-calendar table {

519 border-collapse: collapse;520 max-width: 100%;

521 background-color: transparent;522 width: 100%;523 }524

525 .ant-calendar table,.ant-calendar th,.ant-calendar td {526 border: 0;527 }528

529 .ant-calendar-calendar-table {530 border-spacing: 0;531 margin-bottom: 0;532 }533

534 .ant-calendar-column-header {535 line-height: 18px;536 width: 33px;537 padding: 6px 0;538 text-align: center;539 }540

541 .ant-calendar-column-header .ant-calendar-column-header-inner {542 display: block;

543 font-weight: normal;544 }545

546 .ant-calendar-week-number-header .ant-calendar-column-header-inner {547 display: none;548 }549

550 .ant-calendar-cell {551 padding: 4px 0;552 }553

554 .ant-calendar-date {555 display: block;556 margin: 0 auto;

557 color: rgba(0, 0, 0, 0.65);558 border-radius: 2px;559 width: 20px;560 height: 20px;561 line-height: 18px;

562 border: 1px solid transparent;563 padding: 0;

564 background: transparent;565 text-align: center;

566 transition: background 0.3s ease;567 }568

569 .ant-calendar-date-panel {570 position: relative;

571 }572

573 .ant-calendar-date:hover {574 background: #ecf6fd;575 cursor: pointer;576 }577

578 .ant-calendar-date:active {579 color: #fff;

580 background: #49a9ee;581 }582

583 .ant-calendar-today .ant-calendar-date {584 border-color: #108ee9;585 font-weight: bold;586 color: #108ee9;587 }588

589 .ant-calendar-last-month-cell .ant-calendar-date,.ant-calendar-next-month-btn-day .ant-calendar-date590 {

591 color: rgba(0, 0, 0, 0.25);592 }593

594 .ant-calendar-selected-day .ant-calendar-date {595 background: #108ee9;596 color: #fff;

597 border: 1px solid transparent;598 }599

600 .ant-calendar-selected-day .ant-calendar-date:hover {601 background: #108ee9;602 }603

604 .ant-calendar-disabled-cell .ant-calendar-date {605 cursor: not-allowed;606 color: #bcbcbc;

607 background: #f3f3f3;608 border-radius: 0;609 width: auto;

610 border: 1px solid transparent;611 }612

613 .ant-calendar-disabled-cell .ant-calendar-date:hover {614 background: #f3f3f3;615 }616

617 .ant-calendar-disabled-cell-first-of-row .ant-calendar-date {618 border-top-left-radius: 4px;619 border-bottom-left-radius: 4px;620 }621

622 .ant-calendar-disabled-cell-last-of-row .ant-calendar-date {623 border-top-right-radius: 4px;624 border-bottom-right-radius: 4px;625 }626

627 .ant-calendar-footer-btn {

628 border-top: 1px solid #e9e9e9;629 text-align: center;630 display: block;631 line-height: 38px;632 }633

634 .ant-calendar-footer>div {635 display: inline-block;636 }637

638 .ant-calendar .ant-calendar-today-btn,.ant-calendar .ant-calendar-clear-btn639 {

640 display: inline-block;641 text-align: center;642 margin: 0 0 0 8px;643 }644

645 .ant-calendar .ant-calendar-today-btn-disabled,.ant-calendar .ant-calendar-clear-btn-disabled646 {

647 color: rgba(0, 0, 0, 0.25);648 cursor: not-allowed;649 }

650 .cbt-item {

651 margin-top: 0.5%;652 clear: both;653 }654

655 .cbt-root {656 float: left;

657 margin: 0.5% 0 0.5% 3%;658 }659

660 .ant-checkbox-wrapper:hover .ant-checkbox-inner,.ant-checkbox:hover .ant-checkbox-inner,.ant-checkbox-input:focus+.ant-checkbox-inner661 {

662 border-color: #108ee9;

663 background-color: #108ee9;664 }665

666 .ant-checkbox-checked .ant-checkbox-inner,.ant-checkbox-indeterminate .chose667 {

668 background-color: #fff;669 }