vue中checkbox如何修改为圆形样式
更新时间:2022年12月02日 14:38:30 作者: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; } }
官网图
改后图
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue动态的 BreadCrumb 组件el-breadcrumb ElementUI详解
这篇文章主要介绍了vue如何做一个动态的 BreadCrumb 组件,el-breadcrumb ElementUI2024-07-07
,本文通过图文示例代码相结合给大家介绍的非常详细,需要的朋友可以参考下Element-ui/Element-plus Vue报错问题及解决
这篇文章主要介绍了Element-ui/Element-plus Vue报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-01-01
最新评论