输入元素实现的按钮在点击时没有响应

Question

开发快应用时，将input元素的type设置为button，并设置border-radius属性后，点击button没有响应（背景颜色变化）。如果删除 border-radius 属性，按钮将再次正常工作。

<template>
  <div class="page-wrapper">
    <input type="button" class="button"  value="Animation" />
  </div>
</template>
<script>
</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;
}
</style>

如何在快应用按钮中使用边框半径 CSS 功能。

Answer 1

设置border-radius属性后，由于快应用引擎底层限制，无法自动实现点击效果

设置border-radius属性后，可以使用快应用的伪class实现按钮点击效果

.button:active{
  background-color: green;
}

输入元素实现的按钮在点击时没有响应

A Button Implemented by the Input Element Does Not Respond When Tapped

css

huawei-developers