Symptom Description:

When the input component type is button and the rounded border-radius attribute is set, clicking on the component will not have the click effect (the background color does not change), and deleting the attribute will have the click effect.

The code is as follows:

<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>Copy the code

Problem analysis:

After setting the rounded corner attribute, the engine base is limited so that it cannot automatically implement the click effect, so you need to implement it yourself.

Solutions:

After setting the rounded corner property to achieve the button click effect can be achieved through the fast application pseudo-class.

The modified code is as follows (see red) :

<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>Copy the code

For more details, see:

Fast application pseudo class:

Developer.huawei.com/consumer/cn…

The original link: developer.huawei.com/consumer/cn…

Original author: Mayism