vue中checkbox如何修改为圆形样式
作者：cc25485697
这篇文章主要介绍了vue中checkbox如何修改为圆形样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
checkbox修改为圆形样式
有些时候我们需要对checkbox进行样式修改，例如改为圆圈：
checkbox代码
<input type="checkbox" class="layers-item-selector" :value="item.name" v-model="value" />
css样式
.layers-item-selector {
outline: none;
width: 16px;
height: 16px;
background-color: #ffffff;
border: solid 0px #cccccc;
-webkit-border-radius: 50%;
border-radius: 50%;
font-size: 0.8rem;
margin: 0;
padding: 0;
cursor:pointer;
appearance:none;
-webkit-appearance: none;
-webkit-user-select: none;
user-select: none;
}
/*直接用图片代替选中的样子，如果不需要，可设置背景色*/
.layers-item-selector:checked {
/* background: #0242c6; */
background: url("../../assets/images/checkbox_checked.png") no-repeat;
background-size: 100% 100%;
}更改AntD中CheckBox样式
代码
index.js文件
import React from 'react';
import { Checkbox } from 'antd';
import './index.less';
class demo extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
checkBoxValue: [],
checkBoxOptions: [
// { label: '周', value: 'week', disabled: true },
// { label: '月', value: 'month', disabled: true },
{ label: '周', value: 'week' },
{ label: '月', value: 'month' },
{ label: '季', value: 'quarter' },
{ label: '半年', value: 'halfYear' },
{ label: '年', value: 'year' }
],
}
}
onCheckChange = (value) => {
this.setState({
checkBoxValue: value
});
}
render() {
const {
checkBoxValue,
checkBoxOptions,
} = this.state;
return (<>
<div className='head-area-select'>
<span className='head-area-title'>时间维度：</span>
<Checkbox.Group
options={checkBoxOptions}
defaultValue={['week','month','quarter']}
onChange={this.onCheckChange}
value={checkBoxValue}
/>
</div>
</>)
}
}
export default demo;index.less文件
.head-area {
display: flex;
align-items: center;
margin: 0 0 10px 0;
&-select {
margin-right: 30px;
}
.ant-checkbox-group {
grid-template-columns: repeat(3, 1fr);
}
.ant-checkbox-group-item {
color: #3C5378;
}
.ant-checkbox-inner {
width: 20px;
height: 20px;
}
.ant-checkbox-checked .ant-checkbox-inner::after {
top: 50%;
left: 27%;
}
&-title {
color: #3C5378;
}
}官网图
改后图
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。