webview中的css input 选择器全部变成 uni-input 导致webview样式失效

webview中的css input 选择器全部变成 uni-input 导致webview样式失效

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

操作步骤：

  • webview 中页面css 使用 input

预期结果：

  • 保持

实际结果：

  • css 被改写成 uni-input

bug描述：

  • webview 使用hybrid页面，其中的css input 全部变成 uni-input 导致webview样式失效

image


1 回复

这是一个典型的uni-app WebView样式冲突问题。在uni-app中，为了统一各端的组件表现，原生组件会被映射为uni-前缀的组件，包括input会被转换为uni-input。

解决方案：

  1. 在WebView页面中使用更具体的选择器，比如：
body input {
  /* 你的样式 */
}
  1. 或者使用!important强制覆盖：
input {
  /* 你的样式 */ !important
}
回到顶部