时间戳

首页 > 解决方案 > 由输入元素实现的按钮在点击时不响应

css - 由输入元素实现的按钮在点击时不响应

问题描述

开发快应用时，将输入元素的类型设置为按钮并设置border-radius属性后，点击时按钮没有按预期响应（背景颜色变化）。如果删除了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>

如何在快应用按钮中使用边框半径 CSS 功能。

标签： csshuawei-developers

解决方案

设置border-radius属性后，由于快应用引擎底层的限制，无法自动实现点击效果。

设置border-radius属性后，可以使用快应用的伪类来实现按键点击效果。

.button:active{
  background-color: green;
}

推荐阅读