13

After I click the 'submit' or 'reset' button, the button color stays the hover color and does not return to the original "pre-clicked" button color until you click elsewhere in the page.

I essentially want the button color to change back to the original color after it is clicked. Can anyone suggest 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>
xxCDxx
  • 133
  • 1
  • 1
  • 6

4 Answers4

9

i assume you are styling your button on focus in order to get rid of the outline, so simply split the selector into 2 and on focus remove only the outline:

.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>
Banana
  • 7,424
  • 3
  • 22
  • 43
4

You are very close to the solution. In order to achieve the effect you are looking for try using focus and active instead of hover and focus.

The active state is only triggered when the element is being 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 full solution bellow:

.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>
Gary Torres
  • 520
  • 7
  • 18
  • Thanks Gary. I didn't realize there was an `:active` option. I just started learning five days ago. Appreciate the reposnse. – xxCDxx Mar 12 '15 at 19:41
  • There are some accessibility concerns with outline: none; see http://www.outlinenone.com/ – SS64 Mar 27 '17 at 17:53
1

As i had same issue BUT on mobile. Mobile has thing called sticky hover. ended up @ media(hover: hover) styles. REFERENCED TEXT:

You could for example, define your normal :hover styles inside the media query (@media hover:hover{}) to restrict them to devices that support :hover fully (ones equip with a mouse or certain pointing devices):

 @media (hover:hover) {
    nav a:hover{
        background: yellow;
    }
}

or for a more progressive approach that leaves your original :hover styles untouched, target devices that don't support :hover completely:

@media (hover:none), (hover:on-demand) {
    nav a:hover{ /* suppress hover effect on devices that don't support hover fully
        background: none;
    }
}

Reference: http://javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml

and this: How to prevent sticky hover effects for buttons on touch devices

tarmooo
  • 21
  • 3
  • 1
    While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/24580535) – Lin Du Nov 14 '19 at 14:45
  • @slideshowp2 alright, fixed. but still is better addition for original answer as todays users are on mobile and sticky hover is a real problem there. – tarmooo Nov 14 '19 at 14:57
0

that's because :hover and :focus background color are same So i added background color for :hover only and no background color for :focus

if you wish you can just remove this class form 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>
sanoj lawrence
  • 951
  • 5
  • 29
  • 69