需求
原生的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);
}