关于appgallery-connect: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