el-select 箭头
时间: 2023-11-01 15:57:29 浏览: 46
el-select箭头在选中时会旋转,但是初始状态下是不旋转的。为了实现这个效果,你需要在初始化时添加一个新的class,当用户触发聚焦时,再添加一个旋转的class,失焦时则移除旋转class。具体的CSS代码如下所示:
```css
.el-select.remote-select {
.el-select__caret::before {
content: "\E6E1";
}
.is-focus {
.el-select__caret:first-child {
transform: rotateZ(0deg);
}
}
}
```
相关问题
el-select 箭头偏下
如果el-select的箭头偏下,你可以尝试调整CSS样式来解决这个问题。根据引用的内容,你可以在.el-select > .el-select-dropdown这个CSS选择器中添加transform:translateY(xpx),其中x是你需要调整的像素值。通过修改这个值,你可以使el-select的下拉框位置向上或向下移动,从而调整箭头的位置。请注意,这只是一种解决方案,具体的偏移值可能需要根据实际情况进行调整。
el-select下拉框去掉箭头
要去掉el-select下拉框的箭头,可以通过以下两种方式实现:
1. 使用CSS样式
```css
.el-select .el-input__suffix {
display: none;
}
```
2. 使用el-select组件的props
在el-select组件中设置props的值,将箭头隐藏起来。
```html
<el-select placeholder="请选择" :arrow-show="false">
<el-option label="选项1" value="option1"></el-option>
<el-option label="选项2" value="option2"></el-option>
<el-option label="选项3" value="option3"></el-option>
</el-select>
```