快应用中input实现的button设置border-radius后点击无响应如何解决

快应用原生input[type=button]组件的默认点击态渲染逻辑与border-radius属性存在底层渲染冲突，设置圆角后，组件的:active伪类触发逻辑被渲染层拦截，导致看不到预期的点击背景变化。

• 方案1：使用div模拟按钮（最通用）
  放弃原生input button组件，用div自定义按钮，手动绑定点击事件并声明点击态样式，完全规避原生组件的兼容问题。示例代码如下：

<template>
  <div class="page-wrapper">
    <div class="button" @click="handleClick">Animation</div>
  </div>
</template>
<script>
export default {
  methods: {
    handleClick() {
      // 按钮点击逻辑
    }
  }
}
</script>

<style>
.page-wrapper {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.button {
  color: #20a0ff;
  background-color: red;
  padding: 10px 20px;
  border-radius: 40px;
}
/* 手动声明点击态样式 */
.button:active {
  background-color: #cc0000;
}
</style>

• 方案2：保留input组件，显式声明:active样式
  如果要继续使用原生input组件，手动添加:active伪类的样式规则，强制触发点击态渲染，可解决大部分版本的冲突问题：

/* 在原有.button样式基础上新增以下规则 */
.button:active {
  background-color: #cc0000;
}

• 方案3：外层套容器实现圆角
  将border-radius属性定义在外层包裹的div上，input组件去掉border-radius，同时设置input背景透明、无边框，圆角由外层容器实现，原生input的点击态可正常触发。

内容的提问来源于stack exchange，提问作者DevWithZachary