H5 模式下 uni-app input 选择器样式变成 uni-input 导致样式失效

H5 模式下 uni-app input 选择器样式变成 uni-input 导致样式失效

示例代码：

input,  
button,  
textarea {  
  color: inherit;  
  font: inherit;  
}

操作步骤：

  • 在项目中用 input 选择器写样式，然后项目允许 h5 模式

预期结果：

  • 样式中是 input 选择器

实际结果：

  • 样式中变成了 uni-input 选择器

bug描述：

  • 附件1 为项目中代码，附件2 为实际页面中的样式文件，input 选择器变成了 uni-input

附件图片

Image 1

Image 2


更多关于H5 模式下 uni-app input 选择器样式变成 uni-input 导致样式失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

如果想使用原生的input 可以改为大写试试 <Input></Input>
Input {
color: inherit;
}

更多关于H5 模式下 uni-app input 选择器样式变成 uni-input 导致样式失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我这边使用的是 vant，这部分是组件库内部的，没办法改

在H5模式下，uni-app会将input组件编译为uni-input元素，这是框架的默认行为。你的CSS选择器使用input无法匹配到实际的uni-input元素，导致样式失效。

解决方案是修改CSS选择器为uni-input：

uni-input,
button,
textarea {
  color: inherit;
  font: inherit;
}

如果需要同时兼容小程序和H5，可以使用多选择器：

input,
uni-input,
button,
textarea {
  color: inherit;
  font: inherit;
}
回到顶部