防止点击后按钮颜色变浅答案

【问题标题】：Prevent lighter button colour after click防止点击后按钮颜色变浅
【发布时间】：2020-12-15 20:47:49
【问题描述】：

如何防止按钮文本在点击后变为浅色/透明/不透明？

我有一个设置为红色的按钮，但单击它后，按钮颜色变得有点偏白。有没有办法防止这种情况发生？

带有按钮的标题工具栏 (myPage.ts)

<ion-header>
  <ion-toolbar>
    
    <ion-buttons>
      <ion-button style="color: red;">
        <ion-label>Done</ion-label>
      </ion-button>
    </ion-buttons>
    
  </ion-toolbar>
</ion-header>

无论是否点击，我都需要将按钮重新变为纯红色。

我不确定这是离子问题还是角度问题，因为所有链接在点击后都会改变颜色。

编辑

更改背景并不会阻止颜色淡出，焦点/活动/访问样式似乎也没有任何变化

有趣的是，当我点击离开按钮时，它会恢复为全彩

（离子 5，角度 9）

【问题讨论】：

我的回答对您有帮助吗？尽管投了反对票，但我认为这正是您想要的
@Helsing 不幸的是它没有:(焦点/活动/访问的样式没有任何改变
那时很难说，但试着做 !important 只是为了看看你的规则是否真的被匹配。如果 !important 有效，则仅表示规则被覆盖。在这种情况下，您必须使规则更具体。尝试 a:visited { color: red !important; }

标签： html css angular ionic-framework ionic5

【解决方案1】：

你想用 CSS 改变它。

有一个伪类叫做visited：

a:visited {
  color: red;
}

以下是有关样式链接的进一步阅读： https://www.w3schools.com/css/css_link.asp

【讨论】：

【解决方案2】：

无需添加样式标签。您可以使用简单的离子按钮样式表单Ionic doc。

进入scss文件并添加样式

ion-button{
    --background-activated: var(--ion-color-danger);
}

你可以用这个。

【讨论】：

【解决方案3】：

改变它的背景。

button{background: tomato}

【讨论】：