кнопка отправки остается наведите цвет после щелчка

Question

После того, как я нажму кнопку «отправить» или «сбросить», цвет кнопки останется цветом наведения и не вернется к исходному цвету кнопки «до щелчка», пока вы не нажмете в другом месте стр.

Я хочу, чтобы цвет кнопки изменился на исходный цвет после его нажатия. Может ли кто-нибудь предложить, как это сделать?

Заранее спасибо.

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

я предполагаю, что вы укладка кнопку на фокусе, чтобы избавиться от контура, так просто разделить селектор на 2 и на фокус Вытащите только контур:

.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

это потому, что :hover и :focus цвет фона такие же Так я добавил цвет фона только :hover и не цвет фона для :focus

, если вы хотите, вы не можете просто удалить эту форму класса 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

Вы находитесь в непосредственной близости от решения. Для достижения эффекта вы пытаетесь использовать focus и active вместо hover и focus.

Состояние active активируется только при нажатии элемента.

Вот что я сделал

.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); 
} 

Вы можете проверить полное решение ниже:

.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>