Question

当我点击按钮时，当我出错时，无法将颜色从黑色变回绿色？

   #msform .action-button, #msform .buttons {
    text-align:center;
    width: auto;
    background: #27AE60;
    font-weight: bold;
    font-size: 14px;
    color: white;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
    -moz-box-shadow: 1px 1px 5px #000000;
    -webkit-box-shadow: 1px 1px 5px #000000;
    box-shadow: 1px 1px 5px #000000;    
}

Answer 1

您犯的错误是使用:focus选择按钮，一旦点击按钮，您就会专注于选项按钮，焦点将一直保持到您点击其他更改焦点的对象为止。我建议您阅读this或使用一些javascript魔法来完成您的工作。希望这可以帮助您！

Answer 2

当代码悬停或聚焦时，您的代码会将按钮背景更改为黑色。因此，在您单击它并将光标移动到其他位置后，焦点会一直保持到您单击其他元素为止。如果您希望它仅在悬停时为黑色，则应从代码中移除#msform .action-button:focus和#msform .buttons:focus，将颜色更改为黑色。

（您的Codepen中的第75-77行）

#msform .action-button:hover, #msform .buttons:hover {
 box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60; background: #273423;
}

单击后按钮无法更改颜色

2 个答案: