时间戳

首页 > 解决方案 > 如何避免图标按钮保持选中状态？

javascript - 如何避免图标按钮保持选中状态？

问题描述

我想学习如何在没有任何外部库（只是纯 css/html/js）帮助的情况下创建图标按钮，下面你会发现我的第一次失败尝试：

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url("fonts/icons.woff2");
}

.icons {
    font-family: 'Material Icons';
    font-size: 24px;
}

.icon-button {
    border-radius: 5px;
    border: 0;
    color: #555;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    transition:
        box-shadow .25s ease,
        background .25s ease,
        transform .25s ease;
    background: #ffffffdd;
}

.icon-button:hover {
    color: #e92e73ff;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.35);
}

.icon-button:active {
    background: #ffffffaa;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.35);
    transform: scale(0.9);
}
<!DOCTYPE html>
<html lang="en">

<head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
    <button class="icons icon-button">info</button>
</body>

</html>

如您所见，此尝试的问题在于单击后，该按钮将保持选中状态，并且周围有边界线，我想阻止这种情况。

例如，如果我决定使用 materializecss 来实现我想要的效果，就像这样做一样简单：

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>

<body>
    <a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>
</body>

</html>

所以是的，我的问题......我怎样才能在不使用任何外部库的情况下达到类似的效果？

标签： javascripthtmlcss

解决方案

您需要添加outline: none;到button.

通常， s 具有您需要覆盖的预定义样式，button例如border、和。backgroundfont-familyoutline

推荐阅读