<div class="zs-box-header"> <el-dropdown style="height: 26px; width: 92px; outline: none;"> <span class="el-dropdown-link" style="margin: auto"> {{ selected }} <el-icon class="el-icon--right"> <arrow-down /> </el-icon> </span> <template #dropdown> <el-dropdown-menu> <el-dropdown-item v-for="(item, index) in options" :key="index" :value="item" @click.native="selectOption(item)"> {{ item }} </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> <div style="padding: 0px;"> <el-config-provider :locale="zhCn"> <el-date-picker v-model="NowTimes" type="month" style="width:120px;" :clearable="false" format="YYYY-MM" value-format="YYYY-MM" @change="PickDays()" placeholder="月份"/> </el-config-provider> </div> </div>下拉框在聚焦(选中)时会有黄框,我想把他去掉,该怎么改代码?
时间: 2024-02-14 16:11:21 浏览: 38
您可以在样式表中添加以下 CSS 代码来去掉下拉框的黄色聚焦框:
```
.el-dropdown:focus {
border-color: transparent;
box-shadow: none;
outline: none;
}
```
这样聚焦时的黄框就会被去掉了。如果不希望所有下拉框都去掉黄色聚焦框,可以在该下拉框的样式中添加该代码,如下所示:
```
.el-dropdown.your-custom-class:focus {
border-color: transparent;
box-shadow: none;
outline: none;
}
```
将 `your-custom-class` 替换为你为该下拉框定义的自定义 class 名称。
相关问题
<template> <div style="display: flex;line-height: 50px;"> <div style="margin-top: 8px;"> <i class="el-icon-s-fold" style="font-size: 20px;cursor: pointer;" @click="collapse"></i> </div> <div style="flex: 1;text-align: center;font-size: 34px;line-height: 65px"> <span>欢迎来到仓库管理系统</span> </div> <el-dropdown> <i class="el-icon-user" style="font-size:25px ; margin-right: 10px ; line-height: 70px" ></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item @click.native="toUser">个人中心</el-dropdown-item> <el-dropdown-item @click.native="logOut">退出</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> </template>为什么其中<i class="el-icon-user" style="font-size:25px ; margin-right: 10px ; line-height: 70px" ></i>这行代码加入<span>{{ user.name }}</span>无法运行
因为在这个代码段中,使用了<i>标签来显示用户图标,而这个标签是不支持包含其他标签的。如果想要在图标旁边显示用户名,可以在图标和用户名之间加入一个空格,如下所示:
<i class="el-icon-user" style="font-size:25px ; margin-right: 10px ; line-height: 70px"></i>{{ user.name }}</span>
<el-dropdown trigger="click" @command="handleCommand"> <span class="el-dropdown-link"> <h1> <i class="el-icon-menu"> 菜单目录</i> <i class="el-icon-arrow-down el-icon--right"></i> </h1> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item v-for="game in gameList" :key="game.id" :command="game.id">{{ game.name }}</el-dropdown-item> </el-dropdown-menu> </el-dropdown>让这段代码靠最左侧
这段代码需要使用代码块格式来展示,以下是靠最左侧的代码:
```html
<el-dropdown trigger="click" @command="handleCommand">
<span class="el-dropdown-link">
<h1>
<i class="el-icon-menu"> 菜单目录</i>
<i class="el-icon-arrow-down el-icon--right"></i>
</h1>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="game in gameList" :key="game.id" :command="game.id">{{ game.name }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
```