CODEWITHSUNDEEP
css
RozzA
RozzA

Reputation: 609

CSS transition out after clicking input

Run your mouse down the input fields.
It looks nice, this is the effect I want.
Now - click-hold on a field, see how it fades dark?
Let go the mouse button and observe how it snaps back to light instantly.

I want to reverse this transition effect with the click behaviour:
It should go dark instantly and fade back to light after mouse click release.

Is this at all possible using ONLY CSS, while also retain the original hover effect?

input {
  background: #aa7fce;
  border: 1px solid #4857bb;
  color: #4857bb;
  height: 24px;
  box-sizing: border-box;
  transition: background 0.5s linear 0s;
}
input:hover,
input:focus {
  background: #E2C2FD;
  transition: none;
}
input:active {
  color: #E2C2FD;
  background: #4857bb;
  transition: background 0.5s linear 0s;
}
<input type="text">
<input type="button" value="go">
<br>
<br>
<input type="text" placeholder="name">
<br>
<input type="text" placeholder="address">
<br>
<input type="text" placeholder="phone">
<br>
<input type="text" placeholder="city">
<br>
<input type="text" placeholder="state">
<br>
<input type="text" placeholder="country">

Upvotes: 3

Views: 4318

Answers (1)

Vucko
Vucko

Reputation: 20844

Add transition: none to :active state, and remove the transition from :focus.

input {
  background: #aa7fce;
  border: 1px solid #4857bb;
  color: #4857bb;
  height: 24px;
  box-sizing: border-box;
  transition: background 0.5s linear 0s;
}
input:hover,
input:focus {
  background: #E2C2FD;
}
input:active {
  color: #E2C2FD;
  background: #4857bb;
  transition: none;
}
<input type="text">
<input type="button" value="go">
<br>
<br>
<input type="text" placeholder="name">
<br>
<input type="text" placeholder="address">
<br>
<input type="text" placeholder="phone">
<br>
<input type="text" placeholder="city">
<br>
<input type="text" placeholder="state">
<br>
<input type="text" placeholder="country">

Upvotes: 3

Related Questions