Input组件无点击效果

现象描述：

input组件type为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>

问题分析：
设置圆角属性后，引擎底层受限导致不能自动实现点击效果，需要自己去实现。

解决方法：
设置了圆角属性后要实现按钮点击效果可以通过快应用的伪类实现。

修改后代码如下（见红色部分）：

<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;
}
.button:active{
  background-color: green;
}
</style>

欲了解更多详情，请参见：

快应用伪类：

https://developer.huawei.com/...

原文链接：https://developer.huawei.com/...
原作者：Mayism