单击输入后CSS转换出来

Question

在输入字段中按住鼠标 它看起来不错，这就是我想要的效果。
现在 - 点击一个字段，看看它是如何变暗的？ 按下鼠标按钮，观察它如何瞬间重新点亮。

我想通过点击行为来扭转这种过渡效果：
它应该立即变暗并在鼠标单击释放后淡出淡出。

这是否可以使用ONLY CSS，同时还保留原始的悬停效果？

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

Answer 1

将transition: none添加到:active州，并从:focus移除转换。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;