活动按钮上无阴影、无轮廓、无边框答案

【问题标题】：No shadow, no outline, no border on active button活动按钮上无阴影、无轮廓、无边框
【发布时间】：2015-05-11 15:11:03
【问题描述】：

我正在尝试删除 Ionic 框架中活动边框的所有阴影、边框或其他轮廓元素。

到目前为止，我尝试使用以下指标修改 .sass 文件：

移除边框

$light:                           rgba(255,255,255,0.0) !default;
$button-positive-bg:              $positive !default;
$button-positive-text:            $positive-text !default;
$button-positive-border:          $light !default;!default;
$button-positive-active-bg:       $light !default;!default;
$button-positive-active-border:   $light !default;!default;

去除阴影等

.button:active{
  box-shadow: none !important;
  border-color: rgba(0,0,0,0) !important;
  outline: none !important;
}

但是，按下按钮时我仍然看到一个小阴影（白色背景上的灰色，彩色背景上的变暗）。如何删除所有这些活动元素？我只想要一个普通的按钮。

谢谢。

【问题讨论】：

我的应用中的按钮没有阴影。你在使用 Bootstrap 吗？
当您检查按钮时，box-shadow: 是否有删除线？好像有什么东西压倒了它？使!important 更加重要的一种方法是向元素添加更多父类。如果您在任何地方都使用 .button ，那么它们可能都有相似的父类。试试body .button:active{...}
这里有一个解决方法，可能对您有所帮助！ stackoverflow.com/questions/126445/…
@isherwood：我正在使用 Ionic
@JohnAndrews，在 chrome 或 safari 中查看您的按钮，右键单击它并查看样式（通常在右侧）。也不要使用.body，因为这意味着它正在寻找一个类名为body 的元素。相反，删除点 (.) 并只写 body .button:active {...}

标签： html css ionic-framework

【解决方案1】：

在@ntgCleaner 的帮助下，他展示了如何使用 Chrome 调试器（请参阅我的帖子中的 cmets），我发现当点击按钮时，您将看到类的变化

class="button"

到

class = "button activated"

所以在我的 css/sass 文件中，我添加了：

.button.activated {

 // my custom styiling

}

而且成功了！

【讨论】：