CSS 褪色 select

Question

我是编程新手，但试图写一段 css 并卡在元素上的淡入淡出效果。

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

http://magmamachine.co.uk/blog

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

到目前为止我有这个：

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

这改变了悬停效果。

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

问候麦克

Answer 1

focus 是 css 激活输入的选择器。

尝试使用 :focus 作为输入的选择器：

    .sky-form-orange .input input:focus {
        background-color: #f5b093;
    }

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

...虽然我不确定 HTML 结构，但它应该给你一些想法！

Answer 2

我想你想要的是 CSS :focus 选择器：

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

这里有更多详细信息：http://www.w3schools.com/cssref/sel_focus.asp

Answer 3

我认为你可以使用 CSS3 转换：您可以从下面的 link 中学习如何使用它： CSS3 Transition

Answer 4

使用 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>

CSS 褪色 select

CSS color fade on select

css

select

fade