uni-app中关于input属性使用focus选择器时会出现的样式问题

uni-app中关于input属性使用focus选择器时会出现的样式问题

一开始加载样式没有问题但是 `focus` 选择器 出现位置不正确 应该改变蓝色边框

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20210308/04c62149875421ab4eb7375736ec80ae.jpg)

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20210308/45cb0b5cbe8e4e622d94b10b883540f8.jpg)
8 回复

不能这样写，你用控制台检查元素就能发现下面的边框是另一个元素的边框，而不是input的边框

更多关于uni-app中关于input属性使用focus选择器时会出现的样式问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


所以focus 属性就不能用了呗

回复 1***@163.com: 办法总是有的，看你怎么写了

回复 小菜啊: uni 真是让人头秃啊

回复 1***@163.com: 实在不行你可以用input的focus和blur事件来控制这个边框嘛

回复 小菜啊: 我知道但是很不爽 贼不爽 对我这种有代码洁癖的人来说用js控制 本来css可以控制的样式 我有点接受不了

回复 1***@163.com: 因为uni对input组件有封装，外面有一层元素包裹，唉

在uni-app中，使用:focus伪类选择器时，样式可能因平台差异或CSS作用域问题导致边框位置不正确。建议检查以下几点：

  1. CSS作用域：确保样式定义在正确的作用域内。若使用Vue单文件组件，添加scoped可能影响伪类选择器，可尝试使用深度选择器::v-deep或全局样式。

  2. 平台兼容性：不同平台（如H5、小程序）对:focus的支持可能不一致。使用条件编译针对平台调整样式，例如：

    /* #ifdef H5 */
input:focus {
  border: 2px solid blue;
}
/* #endif */

  3. 样式优先级：确认无其他CSS规则覆盖焦点样式。使用浏览器开发者工具检查元素，验证样式是否生效。

  4. 使用focus事件：若伪类选择器问题持续，可通过JS动态添加类名替代：

    <input [@focus](/user/focus)="handleFocus" [@blur](/user/blur)="handleBlur" />

    methods: {
  handleFocus(e) {
    e.target.classList.add('focused');
  },
  handleBlur(e) {
    e.target.classList.remove('focused');
  }
}

    .focused {
  border: 2px solid blue;
}
回到顶部