Question

我正在使用Bootstrap button generator创建按钮。这些是流畅的设计按钮，我注意到当/cache时，按钮仍在:disabled上投射阴影。

我的问题：

禁用按钮后如何停止阴影？
可以这样做吗？对我来说，似乎是个不错的选择，但是它在Fluent Design按钮上有记载吗？

我尝试过：

:hover

但是它不起作用。

Answer 1

这应该可以完成工作，只是忘记为:使用冒号:disabled而不是点.，这意味着CSS伪类。

.btn:disabled:hover{
    box-shadow: none;
}

Answer 2

向按钮禁用CSS添加pointer-events:none属性。

因为默认情况下按钮悬停是这样编写的，所以我们应该添加这样的自定义CSS。

.btn:disabled{
    pointer-events: none;
}

/*****************OR***************************/

.btn:disabled {
    box-shadow: none !important;
}

Answer 3

如@Pete的注释中所述，为了使代码正常工作，您需要使用CSS special state selector, :disabled而不是df1 <- structure(list(Group = c("Group1", "Group1", "Group2", "Group2", "Group2", "Group3", "Group3"), Country = c("SE", "DE", "SE", "DE", "FI", "SE", "FI")), .Names = c("Group", "Country"), class = "data.frame", row.names = c(NA, -7L))类。

.disabled

解决第二个问题，它是否特定于Fluent Design？我不相信这是事实-截至目前（2018年7月），您只会发现some general idea的任何使用Fluent Design的简单指导原则。

在另一方面，我们将为Fluent Kit库本身添加相同的样式，因为这是我们的监督，因此在下一发行版中，您不会在提到的已禁用Bootstrap buttons上看到阴影。 / p>

仅将鼠标悬停在禁用按钮上时关闭阴影

3 个答案: