Przycisk przesyłania pozostaje w kolorze po kliknięciu

Question

Po kliknięciu przycisku "prześlij" lub "zresetuj" kolor przycisku pozostanie na hover i nie powróci do oryginalnego przycisku "pre-clicked", dopóki nie klikniesz w innym miejscu strona.

Zasadniczo chcę, aby kolor przycisku powrócił do oryginalnego koloru po jego kliknięciu. Czy ktoś może zasugerować, jak to zrobić?

Z góry dziękuję.

CSS/HTML:

.form input:focus { 
 
    background: #FFFFAD; 
 
    outline: none; 
 
} 
 
.buttons { 
 
    text-align: left; 
 
} 
 
.buttons input { 
 
    font-size: 2.5em; 
 
    font-weight: bold; 
 
    font-family: "Arial", serif; 
 
    padding: 8px 40px; 
 
    background: #4470B6; 
 
    border: 0px; 
 
    margin-left: 0px; 
 
    margin-right: 50px; 
 
    margin-top: 50px; 
 
    -moz-border-radius: 50px; 
 
    -webkit-border-radius: 50px; 
 
    border-radius: 50px; 
 
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75); 
 
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75); 
 
    box-shadow: 0 0 4px rgba(0, 0, 0, .75); 
 
    color: #FFFAFA; 
 
} 
 
.buttons input:hover, 
 
.buttons input:focus { 
 
    background-color: #50627E; 
 
    outline: none; 
 
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75); 
 
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75); 
 
    box-shadow: 0 0 1px rgba(0, 0, 0, .75); 
 
}

<!-- Details Form --> 
 

 
<section class="details"> 
 
    <form id="form" action="test.php" method="post" autocomplete="on" target="_blank"> 
 

 
    <div class="form"> 
 
     <label>First Name:</label> 
 
     <input type="text" name="firstname" placeholder="First Name" autofocus /> 
 
    </div> 
 

 
    <div class="buttons"> 
 
     <input type="submit" value="Search"> 
 
     <input type="reset" value="Reset"> 
 
    </div> 
 
    </form> 
 
</section>

Answer 1

Zakładam, że jesteś stylizacji swój przycisk na ostrości, aby pozbyć się obrys, tak po prostu podzielić wybierak do 2 i na ostrości Usuń tylko kontur:

.form input:focus { 
 
    background: #FFFFAD; 
 
    outline: none; 
 
} 
 
.buttons { 
 
    text-align: left; 
 
} 
 
.buttons input { 
 
    font-size: 2.5em; 
 
    font-weight: bold; 
 
    font-family: "Arial", serif; 
 
    padding: 8px 40px; 
 
    background: #4470B6; 
 
    border: 0px; 
 
    margin-left: 0px; 
 
    margin-right: 50px; 
 
    margin-top: 50px; 
 
    -moz-border-radius: 50px; 
 
    -webkit-border-radius: 50px; 
 
    border-radius: 50px; 
 
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75); 
 
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75); 
 
    box-shadow: 0 0 4px rgba(0, 0, 0, .75); 
 
    color: #FFFAFA; 
 
} 
 
.buttons input:hover 
 
{ 
 
    background-color: #50627E; 
 
    outline: none; 
 
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75); 
 
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75); 
 
    box-shadow: 0 0 1px rgba(0, 0, 0, .75); 
 
} 
 
.buttons input:focus { 
 
    outline: none; 
 
}

<!-- Details Form --> 
 

 
<section class="details"> 
 
    <form id="form" action="test.php" method="post" autocomplete="on" target="_blank"> 
 

 
    <div class="form"> 
 
     <label>First Name:</label> 
 
     <input type="text" name="firstname" placeholder="First Name" autofocus /> 
 
    </div> 
 

 
    <div class="buttons"> 
 
     <input type="submit" value="Search"> 
 
     <input type="reset" value="Reset"> 
 
    </div> 
 
    </form> 
 
</section>

Answer 2

to dlatego :hover i :focus kolor tła są takie same więc dodałem kolor tła tylko :hover a nie kolor tła dla :focus

jeśli chcesz, możesz po prostu usunąć ten formularz klasy css .buttons input:focus

.form input:focus { 
 
    background: #FFFFAD; 
 
    outline: none; 
 
} 
 
.buttons { 
 
    text-align: left; 
 
} 
 
.buttons input { 
 
    font-size: 2.5em; 
 
    font-weight: bold; 
 
    font-family: "Arial", serif; 
 
    padding: 8px 40px; 
 
    background: #4470B6; 
 
    border: 0px; 
 
    margin-left: 0px; 
 
    margin-right: 50px; 
 
    margin-top: 50px; 
 
    -moz-border-radius: 50px; 
 
    -webkit-border-radius: 50px; 
 
    border-radius: 50px; 
 
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75); 
 
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75); 
 
    box-shadow: 0 0 4px rgba(0, 0, 0, .75); 
 
    color: #FFFAFA; 
 
} 
 
.buttons input:hover, 
 
.buttons input:focus { 
 
    
 
    outline: none; 
 
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75); 
 
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75); 
 
    box-shadow: 0 0 1px rgba(0, 0, 0, .75); 
 
} 
 
.buttons input:hover{ 
 
background-color: #50627E;}

<!-- Details Form --> 
 

 
<section class="details"> 
 
    <form id="form" action="test.php" method="post" autocomplete="on" target="_blank"> 
 

 
    <div class="form"> 
 
     <label>First Name:</label> 
 
     <input type="text" name="firstname" placeholder="First Name" autofocus /> 
 
    </div> 
 

 
    <div class="buttons"> 
 
     <input type="submit" value="Search"> 
 
     <input type="reset" value="Reset"> 
 
    </div> 
 
    </form> 
 
</section>

Answer 3

Jesteś bardzo blisko rozwiązania. Aby uzyskać efekt, którego szukasz, spróbuj użyć focus i active zamiast hover i focus.

Stan jest wyzwalany tylko po kliknięciu elementu.

Oto co zrobiłem

.buttons input:focus { 
    outline: none 
} 
.buttons input:active { 
    border: 0; 
    background-color: #50627E; 
    outline: none; 
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75); 
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75); 
    box-shadow: 0 0 1px rgba(0, 0, 0, .75); 
} 

można sprawdzić pełne rozwiązanie poniżej:

.form input:focus { 
 
    background: #FFFFAD; 
 
    outline: none; 
 
} 
 
.buttons { 
 
    text-align: left; 
 
} 
 
.buttons input { 
 
    font-size: 2.5em; 
 
    font-weight: bold; 
 
    font-family: "Arial", serif; 
 
    padding: 8px 40px; 
 
    background: #4470B6; 
 
    border: 0px; 
 
    margin-left: 0px; 
 
    margin-right: 50px; 
 
    margin-top: 50px; 
 
    -moz-border-radius: 50px; 
 
    -webkit-border-radius: 50px; 
 
    border-radius: 50px; 
 
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75); 
 
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75); 
 
    box-shadow: 0 0 4px rgba(0, 0, 0, .75); 
 
    color: #FFFAFA; 
 
} 
 

 
.buttons input:focus { 
 
    outline: none 
 
} 
 
.buttons input:active { 
 
    border: 0; 
 
    background-color: #50627E; 
 
    outline: none; 
 
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75); 
 
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75); 
 
    box-shadow: 0 0 1px rgba(0, 0, 0, .75); 
 
}

<!-- Details Form --> 
 

 
<section class="details"> 
 
    <form id="form" action="test.php" method="post" autocomplete="on" target="_blank"> 
 

 
    <div class="form"> 
 
     <label>First Name:</label> 
 
     <input type="text" name="firstname" placeholder="First Name" autofocus /> 
 
    </div> 
 

 
    <div class="buttons"> 
 
     <input type="submit" value="Search"> 
 
     <input type="reset" value="Reset"> 
 
    </div> 
 
    </form> 
 
</section>