checkbox.css 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. uni-checkbox {
  2. -webkit-tap-highlight-color: transparent;
  3. display: inline-block;
  4. cursor: pointer;
  5. }
  6. uni-checkbox[hidden] {
  7. display: none;
  8. }
  9. uni-checkbox[disabled] {
  10. cursor: not-allowed;
  11. }
  12. .uni-checkbox-wrapper {
  13. display: inline-flex;
  14. align-items: center;
  15. vertical-align: middle;
  16. }
  17. .uni-checkbox-input {
  18. margin-right: 5px;
  19. appearance: none;
  20. outline: 0;
  21. border: 1px solid #d1d1d1;
  22. background-color: #ffffff;
  23. border-radius: 3px;
  24. width: 22px;
  25. height: 22px;
  26. position: relative;
  27. }
  28. .uni-checkbox-input svg {
  29. color: #007aff;
  30. font-size: 22px;
  31. position: absolute;
  32. top: 50%;
  33. left: 50%;
  34. transform: translate(-50%, -48%) scale(0.73);
  35. }
  36. @media (hover: hover) {
  37. uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
  38. border-color: var(--HOVER-BD-COLOR, #007aff) !important;
  39. }
  40. }
  41. .uni-checkbox-input.uni-checkbox-input-disabled {
  42. background-color: #e1e1e1;
  43. }
  44. .uni-checkbox-input.uni-checkbox-input-disabled:before {
  45. color: #adadad;
  46. }
  47. uni-checkbox-group {
  48. display: block;
  49. }