Espero esto sea lo que buscas En este caso usamos `jquery` al activar el evento `mouseover` que al elemento se le cambie la propiedad `background` y al activar el evento `mouseout` que vuelva a su estatus anterior. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> $(".input").mouseover(function(){ $(this).css({"background":"rgb(82, 179, 126)"}) }) $(".input").mouseout(function(){ $(this).css({"background":"transparent"}) }) <!-- language: lang-html --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input placeholder="background con jquery" class="input" type="text" name="" value=""> <!-- end snippet --> En este caso solo hay que usar la propiedad de `css` `:hover` que se activa cuando el `input` esta activo <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> input:hover { background: rgb(168, 168, 168); } <!-- language: lang-html --> <input placeholder="input cambio de color" type="text" name="" value=""> <!-- end snippet -->