All geek questions in one place

The submit button will leave the cursor color after clicking

After I press the "send" or "reset" button, the color of the button will remain the color on hover and will not return to the original color of the "pre-pressed" button until you click elsewhere on the page.

Essentially, I want the button color to be the same again after clicking. Can anyone tell me how to do this?

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>
+5
source share
3 answers

I assume that you put your button in focus to get rid of the outline, so just divide the selector by 2 and remove only the outline into 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 { 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>
+2
source

You are very close to a solution. To achieve the effect, you are trying to use focus and active instead of hover and focus .

The active state is only triggered when an item is clicked.

Here is what i did

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

You can check the complete solution below:

 .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>
+3
source

because the background color of :hover and :focus same Thus, I added background color only for :hover and background color for :focus

if you want, you can simply remove this cool css .buttons input:focus form

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

Source: https://habr.com/ru/post/1215252/

More articles:


All Articles