el-checkbox 勾选样式修改
时间: 2023-11-14 17:07:14 浏览: 124
el-checkbox 是饿了么团队开发的基于 Vue.js 的复选框组件。要修改 el-checkbox 的勾选样式,可以使用以下方法:
1. 使用 CSS 修改样式:
可以通过自定义 CSS 来修改 el-checkbox 的勾选样式。你可以使用 `::before` 伪元素来修改默认的勾选样式。例如,可以修改勾选框的背景色、边框颜色等属性。
```css
.el-checkbox::before {
background-color: red; /* 修改勾选框的背景色 */
border-color: blue; /* 修改勾选框的边框颜色 */
}
```
2. 使用 el-checkbox 的 slot 来自定义样式:
el-checkbox 提供了一些 slot 来进行自定义样式。你可以使用 `icon` slot 来自定义勾选图标的样式。
```html
<el-checkbox v-model="checked">
<template #icon>
<i class="el-icon-check"></i> <!-- 自定义勾选图标 -->
</template>
Label
</el-checkbox>
```
以上是两种常用的修改 el-checkbox 勾选样式的方法。你可以根据实际需求选择适合的方式进行修改。
相关问题
el-checkbox 圆形勾选样式
你可以通过设置 el-checkbox 的 slot 插槽来自定义圆形勾选样式。具体实现方式如下:
1. 在 el-checkbox 标签中添加 slot="icon" 属性。
2. 在 el-checkbox 标签的内部添加一个 span 标签,设置其 class 为 el-checkbox__inner。
3. 在该 span 标签内部添加一个 i 标签,设置其 class 为 el-icon。
4. 在该 i 标签内部添加一个 svg 标签,设置其 class 为 el-checkbox__input。
5. 在该 svg 标签内部添加一个 path 标签,设置其 d 属性为勾选时的路径,例如 M1.73,12.91l6.37,6.37L22.79,4.59。
完整示例代码如下:
```
<el-checkbox v-model="checked" slot="icon">
<span class="el-checkbox__inner">
<i class="el-icon">
<svg class="el-checkbox__input" viewBox="0 0 24 24">
<path d="M1.73,12.91l6.37,6.37L22.79,4.59"></path>
</svg>
</i>
</span>
</el-checkbox>
```
你可以根据自己的需求进行样式调整,例如修改 path 标签的颜色、大小等属性。
el-checkbox 修改圆形勾选样式
要修改el-checkbox的圆形勾选样式,可以在CSS中添加以下代码:
```
.el-checkbox__input.is-checked .el-checkbox__inner::after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
}
```
其中,`background-color`可以改为自己想要的颜色。如果想要修改勾选框的大小,可以调整`width`和`height`的值。