移动端禁用状态按钮点击与触摸按下时避免灰化及自定义颜色的CSS解决方案

嘿，针对你遇到的这两个移动端按钮样式问题，我来一步步帮你解决：

1. 阻止禁用按钮点击时灰化 #

移动端浏览器（比如你测试的Chrome安卓版）会给禁用状态的按钮添加默认的触摸灰化效果，这是浏览器的内置样式。要去掉这个效果，你需要做两个关键的样式重置：

• 移除移动端触摸时的默认高亮反馈：使用-webkit-tap-highlight-color: transparent
• 重置浏览器可能给禁用按钮添加的灰化滤镜：使用filter: none

修改你的.btn基础样式：

.btn { 
  border: 0; 
  cursor: pointer; 
  display: inline-block; 
  font-family: "Myriad-Regular"; 
  line-height: 2rem; 
  margin: 1rem 0; 
  padding: 2.2rem; 
  text-align: center; 
  text-transform: uppercase; 
  white-space: nowrap; 
  width: 100%; 
  /* 新增以下两行 */
  -webkit-tap-highlight-color: transparent;
  filter: none;
}

这样就能阻止浏览器默认的点击灰化效果，保持你自定义的:disabled背景色#f6c5ab。

2. 禁用按钮触摸按下时改变颜色（而非灰化） #

要实现这个效果，你需要利用:disabled:active伪类——移动端触摸按下元素时会触发:active状态，即使按钮处于禁用状态（这是移动端浏览器的特性）。

在你的样式中添加这个伪类的自定义样式，替换默认的灰化效果：

.btn--primary:disabled:active {
  background: #e88a55; /* 这里设置你想要的按下时的颜色 */
  /* 继承filter: none确保没有灰化滤镜 */
}

关键CSS属性说明 #

• -webkit-tap-highlight-color: 控制移动端触摸元素时的默认高亮颜色，设为transparent可以完全移除这个高亮
• filter: none: 重置浏览器可能对禁用按钮应用的grayscale()或其他灰化滤镜，确保自定义背景色生效
• :disabled:active: 匹配处于禁用状态且被触摸按下的按钮，用来定义自定义的按下样式

最后，修改后的完整CSS代码如下：

.btn { 
  border: 0; 
  cursor: pointer; 
  display: inline-block; 
  font-family: "Myriad-Regular"; 
  line-height: 2rem; 
  margin: 1rem 0; 
  padding: 2.2rem; 
  text-align: center; 
  text-transform: uppercase; 
  white-space: nowrap; 
  width: 100%; 
  -webkit-tap-highlight-color: transparent;
  filter: none;
}
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: #f79661; }
.btn--primary:disabled { background: #f6c5ab; }
.btn--primary:disabled:active { background: #e88a55; }

你可以把#e88a55换成任何你想要的按下时的颜色，测试一下，应该就能在你的Galaxy A42设备上看到预期效果了！

内容的提问来源于stack exchange，提问作者Junior Silva