现象描述：
input组件type为button时，设置了圆角border-radius属性后，点击该组件时没有点击效果了（背景色没有变化），删除该属性就是有点击效果的。
代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<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; red; padding: 10px 20px; border-radius: 40px;}</style> |
问题分析：
设置圆角属性后，引擎底层受限导致不能自动实现点击效果，需要自己去实现。
解决方法：
设置了圆角属性后要实现按钮点击效果可以通过快应用的伪类实现。
修改后代码如下（见红色部分）：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<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; red; padding: 10px 20px; border-radius: 40px;}.button:active{ green;}</style> |
欲了解更多详情，请参见：
快应用伪类：
https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-style#h1-1578402140607
原文链接：https://developer.huawei.com/...
原作者：Mayism