选择时CSS颜色淡入淡出

Question

我是编程新手，但在尝试编写一段 css 时遇到了元素的淡入淡出效果。

我正在尝试更改我的 wordpress 网站上的订阅小部件(右上角)，使其样式看起来像它下面的搜索小部件。

http://magmamachine.co.uk/blog

我试图让我的输入字段的背景在用户选择它们时淡出不同的颜色。 - 就像下面的搜索字段一样。

到目前为止我有这个:

.sky-form-orange .input:hover input{
background-color: #f5b093 !important;
}

这改变了悬停的效果。

是否可以将其更改为在选中时淡出而不是悬停？

问候麦克

Answer 1

使用 background-color 和 transition，您可以获得平滑的淡入淡出效果。

我添加了一个边框来证明过渡适用于多个值。

.sky-form-orange .input input {
  border: 1px solid black;
  background-color: #ccc;
  transition: all 1s ease;
}
.sky-form-orange .input input:focus {
  border-color: red;
  background-color: #f5b093;
  outline: none;
}

<div class="sky-form-orange">
  <div class="input">
    <input type="text">
  </div>
</div>