::v-deep .el-radio-button__inner { width: 30px; height: 42px; //background: #f7f8fa; color: #333; //border: 0 !important; } 如何设置按扭内文字到边框的距离
时间: 2023-12-06 21:45:42 浏览: 104
你可以使用 `padding` 属性来调整内文字到边框的距离。,设置左右内边距为 5px,上下内边距为 0,可以使用以下 CSS 代码:
```css
.el-radio-button__inner {
padding: 0 5px;
}
```
你可以根据自己的需求调整内边距的数值。
相关问题
<el-radio-group v-model="staffInfo.sex"> <el-radio-button label="1">男</el-radio-button> <el-radio-button label="2">女</el-radio-button> </el-radio-group> 样式修改 ::v-deep.el-radio-button{ margin-right: 15px; border-radius:4px; .el-radio-button__inner {//修改按钮样式 width: 120px; height: 42px; background: #F7F8FA; color:#333; border: 0 !important; } .el-radio-button__orig-radio:checked + .el-radio-button__inner {// 修改按钮激活样式 color: #fff; background-color: #f63; border-color: #f63; box-shadow: -1px 0 0 0 #f63; } ———这个完整的代码应该怎样写
完整的代码应该如下所示:
```html
<template>
<el-radio-group v-model="staffInfo.sex">
<el-radio-button label="1">男</el-radio-button>
<el-radio-button label="2">女</el-radio-button>
</el-radio-group>
</template>
<style scoped>
::v-deep .el-radio-button {
margin-right: 15px;
border-radius: 4px;
}
::v-deep .el-radio-button__inner {
width: 120px;
height: 42px;
background: #f7f8fa;
color: #333;
border: 0 !important;
}
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
color: #fff;
background-color: #f63;
border-color: #f63;
box-shadow: -1px 0 0 0 #f63;
}
</style>
```
注意,样式选择器中的 `::v-deep` 是用于穿透组件样式限制的,需要在样式选择器前加上 `scoped` 声明,以限定样式仅在当前组件内生效。
.add-update-preview .el-textarea /deep/ .el-textarea__inner { border: 2px solid #797979; border-radius: 4px; padding: 12px; outline: none; color: #333; width: 300px; font-size: 14px; height: 120px; }
这段代码是一个 CSS 样式规则,它将被应用于具有 `.add-update-preview` 类的元素中包含的深度层级中的所有 `.el-textarea__inner` 元素。它的作用是将这些元素的边框、圆角、填充、文本颜色和尺寸样式进行自定义,以便更好地适应页面的整体设计和布局。具体来说,它将设置这些元素的边框为 2 像素宽的实线,颜色为 #797979,边框圆角为 4 像素,填充为 12 像素,文本颜色为 #333,宽度为 300 像素,高度为 120 像素,字体大小为 14 像素,并取消它们的外边框。
阅读全文