vue中checkbox如何修改為圓形樣式
更新時(shí)間：2022年12月02日 14:38:30 作者：cc25485697
這篇文章主要介紹了vue中checkbox如何修改為圓形樣式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
checkbox修改為圓形樣式
有些時(shí)候我們需要對checkbox進(jìn)行樣式修改，例如改為圓圈：
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;
}
/*直接用圖片代替選中的樣子，如果不需要，可設(shè)置背景色*/
.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'>時(shí)間維度：</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;
}
}官網(wǎng)圖
改后圖
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-cli3 熱更新配置操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Vue中使用WebWorker的示例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue 簡單自動補(bǔ)全的輸入框的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue使用axios訪問本地json文件404問題及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue阻止頁面回退的實(shí)現(xiàn)方法(瀏覽器適用)
這篇文章主要介紹了vue阻止頁面回退的實(shí)現(xiàn)方法(瀏覽器適用)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家介紹了vue使用Echart線柱混合圖排坑記錄,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
Vue中v-on的基礎(chǔ)用法、參數(shù)傳遞和修飾符的示例詳解
使用v-on:click給button綁定監(jiān)聽事件以及回調(diào)函數(shù)，@是v-on:的縮寫，也就是簡寫也可以使用@click，這篇文章主要介紹了Vue中v-on的基礎(chǔ)用法、參數(shù)傳遞和修飾符,需要的朋友可以參考下2022-08-08
element中使用formdata進(jìn)行上傳文件的方法
本文主要介紹了elementUI中使用formdata進(jìn)行上傳文件的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
vue導(dǎo)出excel的兩種實(shí)現(xiàn)方式代碼
這篇文章主要給大家介紹了關(guān)于vue導(dǎo)出excel的兩種實(shí)現(xiàn)方式,在項(xiàng)目中我們可能會碰到導(dǎo)出Excel文件的需求,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-08-08
Vue 按照創(chuàng)建時(shí)間和當(dāng)前時(shí)間顯示操作(剛剛,幾小時(shí)前,幾天前)
這篇文章主要介紹了Vue 按照創(chuàng)建時(shí)間和當(dāng)前時(shí)間顯示操作(剛剛,幾小時(shí)前,幾天前)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09