🔥🔥🔥欢迎关注csdn前端领域博主: 前端小王hs

🔥🔥🔥email: 337674757@qq.com

🔥🔥🔥前端交流群： 598778642

Vue3引入elementplus的输入框el-input，如果想在鼠标点击即搜索框获得焦点后发生变化，那就得用到css的:focus选择器

:focus不能用在div上，一般用于输入框input

引入el-input

<el-input v-model="input" placeholder="Please input" class="input" />

使用:focus选择器改变样式

.input:focus{
	width: 220px;
}

发现失效了

问题出在哪呢？这里有个很坑的点就是:focus前面需要有个空格
正确写法：

.input :focus{
	width: 220px;
}

如果是:hover则不用

.input:hover{
	width: 220px;
}