Button can't change color after click

Question

When I click on button, then can't change color back from black to green, when I make mistake?

   #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;    
}

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

The mistake that you made is using :focus to select the button, once clicked on the button, you are Focused on the option button, and the focus will remains until you click on other object which changes your focus. I would recommend that you can read this or use some javascript magic to finish your work.Hope this can help you!

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 19 '17 at 06:31

Dreamer

171
3
10

that's right. He can use `:active` instead of `:focus` – Miro Feb 19 '17 at 06:35

score 0 · Answer 2 · answered Feb 19 '17 at 06:39

Your code changes buttons background to black when it's hovered or focused. So, after you click it and move cursor somewhere else, focus stays until you click some other element. If you want it to be black only when hovered, you should remove #msform .action-button:focus and #msform .buttons:focus from your code what changes color to black.

(Rows 75-77 in your Codepen)

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

Button can't change color after click

2 Answers2