Input component has no click effect

Symptom:

When the input component type is button, after setting the rounded border-radius property, there is no click effect when the component is clicked (the background color does not change), and deleting this property will have a clicking effect.

code show as below:

<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>

problem analysis:
After setting the rounded corner properties, the bottom layer of the engine is limited and the click effect cannot be realized automatically, so you need to implement it yourself.

Solution:
After setting the rounded corner property, the button click effect can be realized by the pseudo-class of quick application.

The modified code is as follows (see the red part):

<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>

For more details, please see:

Quickly apply pseudo-classes:

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-style#h1-1578402140607

Original link: https://developer.huawei.com/consumer/cn/forum/topic/0203471562462460263?fid=0101271690375130218
Original Author: Mayism