HTML通用组件模板：自定义checkbox样式

需求

原生的checkbox样式很单一，常常需要自定义样式

方式一

使用label关联input[checkbox],input隐藏，label覆盖input显示，设置label选中前后的样式即可。

HTML:

<div class="cbk-tubiao-con">
  <input id="pro-1" class="cbk-tubiao" type="checkbox" />
  <label for="pro-1"></label>
</div>

CSS:

/*自定义checkbox*/
.cbk-tubiao-con>label:before {
    margin-top:-2px;
}
.cbk-tubiao-con {
    height:20px;
    position:relative;
}
.cbk-tubiao-con>label {
    line-height:20px;
}
.cbk-tubiao-con>label:before {
    box-sizing:border-box;
    display:inline-block;
    content:"";
    width:24px;
    height:24px;
    border-radius:50%;
    background:url("http://p31rkzyhv.bkt.clouddn.com/unchoose.png") no-repeat;
    background-size:100%;
    position:absolute;
    top:0;
    left:0;
}
input.cbk-tubiao {
    width:24px;
    height:24px;
    visibility:hidden;
    vertical-align:middle;
}
.cbk-tubiao-con input.cbk-tubiao:checked + label:before {
    content:"";
    background:url("http://p31rkzyhv.bkt.clouddn.com/choose.png") no-repeat;
    text-align: center;
}

把css中的background换成自己的图片即可

方式二

我们用react演示

tsx组件

import React, { useState } from "react";
import styles from "./Checkbox.module.css";

interface Props {
  className?: string;
  onChange?: (state: boolean) => void;
  style?: React.CSSProperties;
  children?: React.ReactNode;
  checked?: boolean;
}

export const Checkbox: React.FC<Props> = ({
  className,
  onChange,
  children,
  style = {},
  checked,
}) => {
  let [checkedState, setCheckedState] = useState(checked || false);

  const handleChange = () => {
    onChange(!checkedState);
    setCheckedState(!checkedState);
  };

  return (
    <label className={styles.container}>
      {children}
      <input type="checkbox" onChange={handleChange} checked={checkedState} />
      <span className={styles.checkmark}></span>
    </label>
  );
};

对应的样式

/* The container */
.container {
  position: relative;
  padding: 0 1em 0 1.4em;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.1em;
  width: 1.1em;
  background-color: gray;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: lightgary;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196f3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 0.4em;
  top: 0.1em;
  width: 0.3em;
  height: 0.7em;
  border: solid white;
  border-width: 0 0.1em 0.1em 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}