CSS color fade on select -

im new programming trying write piece of css , getting stuck fading effect on element.

i'm trying change subscription widget (top right) on wordpress site styled search widget below it.

http://magmamachine.co.uk/blog

i'm trying background of input fields fade different color when user selects them. - search field below.

so far have this:

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

which changes effect on hover.

is possible change fade when selected , not hover?

regards mike

with background-color , transition, smooth fading effect.

i've added border demonstrate transition works multiple values.

.sky-form-orange .input input {    border: 1px solid black;    background-color: #ccc;    transition: 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>