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/consumer/cn/doc/development/quickApp-References/quickapp-style#h1-1578402140607