CSS color fade on select

Question

Im new to programming but trying to write a piece of css and getting stuck with a fading effect on an element.

I'm trying to change the subscription widget (top right) on my wordpress site so that it is styled to look like the search widget below it.

http://magmamachine.co.uk/blog

I'm trying to get the background of my input fields to fade a different color when the user selects them. - like the search field does below.

so far I have this:

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

Which changes the effect on hover.

Is it possible to change this to fade when selected and not hover?

regards mike

Answer 1

With background-color and transition, you get a smooth fading effect.

I've added a border to demonstrate that the transition works with multiple values.

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