vue中checkbox如何修改为圆形样式

目录
  • checkbox修改为圆形样式
  • 更改AntD中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;
	}
}

官网图

改后图

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中element组件样式修改无效的解决方法

    如下所示: <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写style注意不加scoped,然后用一个组件最外层的class包裹住,就不会改到所有的组件的样式了. 以上这篇vue中element组件样式修改无效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue 组件间的样式冲突污染 浅谈vue中改elementUI默认样式引发的st

  • Vue自定义指令实现checkbox全选功能的方法

    最近做的一个项目需要用到Vue实现全选功能,参考了一下网上的做法,发现用属性计算的复用性不高,于是选用自定义指令,但网上的做法大多是会对原始数据有一定的格式要求,而且没有返回结果,于是做了改进. 上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id

  • 利用Vue.js实现checkbox的全选反选效果

    前言 这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果,之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. html示例代码 <template> <div> <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'

  • vue中checkbox如何修改为圆形样式

    目录 checkbox修改为圆形样式 更改AntD中CheckBox样式 checkbox修改为圆形样式 有些时候我们需要对checkbox进行样式修改,例如改为圆圈: checkbox代码 <input type="checkbox" class="layers-item-selector" :value="item.name" v-model="value" /> css样式 .layers-item-sele

  • vue里面父组件修改子组件样式的方法

    在使用 vue 的开发中,我们有时会引用外部组件,包括 UI 组件(ElementUI.iview). 当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素. 但是在父组件中添加 scoped 之后,父组件的样式将不会渗透到子组件中,所以在父组件中书写子组件的样式是无效果的. 一.去掉 scoped 在父组件的 <style> 中去掉 scoped 后,父组件中可以书写子组件的样式,但是你会担心这样会污染全局样式. [因为我们知道正确使用全局样式

  • 解决vue中无法动态修改jqgrid组件 url地址的问题

    在项目开发中使用封装的jqgrid组件时需要动态修改URL地址,直接修改URL地址jqgrid请求的url地址并不会改变,这时我们可以强行修改jqgrid的url地址,修改如下: $("#accountGrid").setGridParam( //G,P要大写 { url:UrlService.url('www/1') } ) .trigger("reloadGrid"); 以上这篇解决vue中无法动态修改jqgrid组件 url地址的问题就是小编分享给大家的全部内

  • 在vue中使用vuex,修改state的值示例

    1. 安装 vuex npm install vuex -S 2.在目录下创建store文件 3. 在store.js编辑一个修改state的方法 然后在mian.js中全局引入 最后在组件中使用 这个的功能是运用mutations 修改state中的值 以上这篇在vue中使用vuex,修改state的值示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 在vue中动态修改css其中一个属性值操作

    我就废话不多说了,大家还是直接看代码吧~ <template> <!--此div的高度取屏幕可视区域的高度--> <div class="hello" :style="{'height':getClientHeight}"> <h5>{{ msg }}</h5> </div> </template> <script> export default { data() { r

  • checkbox在vue中的用法小结

    前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue中用到过的checkbox也只是别人写好的组件,这次在自己实现时走了很多坑,特意写这篇文章记录下来,给后来者提供一个参考 在这之前,先看看原生checkbox搭配jquery取值的用法 <input type="checkbox" name="hobby" v

  • Vue中的循环及修改差值表达式的方法

    一.Vue中的循环 v-for 常见的4总情况 #第一种 <div v-for="item in items"></div> #第二种 <div v-for="(item, index) in items"></div> #第三种 <div v-for="(val, key) in object"></div> #第四种 <div v-for="(val, n

  • vue中element-ui组件默认css样式修改的四种方式

    vue中element-ui组件默认css样式修改的四种方式

    目录 前言 1.使用全局统一覆盖 2.在.vue文件中修改 3.修改组件的style样式 4. 参考element-ui官方文档的api 疑问 总结 前言 修改element-ui组件的默认样式一直是一个老生长谈的话题,在做完公司的一整个项目后,我总结了以下4种修改element-ui默认样式的方法. 1.使用全局统一覆盖 针对一些通用的.样式固定的组件,可以全局处理,其方法是新建一个css或者scss文件,覆盖element原有的class 你可以在src/styles目录下新建一个eleme

  • 在Vue中使用deep深度选择器修改element UI组件的样式

    在项目当中我们常常会使用到 Element UI 组件库来进行快速开发,但是组件在引入之后它都会有官方默认的样式,有些情况我们需要修改它的样式. 方法一(不推荐):使用class 为要修改的这个组件标签设置一个 class 类名,然后在 <style></style> 标签中设置样式.但要注意这种方式必须是在全局下才会生效,也就是说 <style></style> 标签中不能用 scoped 属性. <style> </style>

随机推荐