Cambiar imagen al hacer click

Hola, en mi web, quiero que al hacer click en un formulario de busqueda, el fondo de este cambie de color.

el codigo es este

Código :

#search input {
   background: url(images/search-bgr.gif) repeat-x top;
   border: 1px solid #000000;
   float: left;
   padding: 8px;
   width: 285px;
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

Seria que se muestre la imagen search-bgr.gif pero al hacer click se muestre una diferente

Código :

#search input {
   background: url(images/search-bgr.gif) repeat-x top;
   border: 1px solid #000000;
   float: left;
   padding: 8px;
   width: 285px;
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

#search input: hover {
   background: url(images/otraimagen.gif) repeat-x top;
}

o 

#search input {
   background: url(images/search-bgr.gif) repeat-x top;
   border: 1px solid #000000;
   float: left;
   padding: 8px;
   width: 285px;
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

#search input: focus{
   background: url(images/otraimagen.gif) repeat-x top;
}

no funciona ninguna de las 2 formas

emm prueba sin imagines y usa colores como fondos

¿se aceptan los espacios?

#search input

ó

#search_input

no acepta espacio

les esta poniendo estilos a todos los input del search.

que tal si pones #search y a ese le pones los estilos no deberias poner input porque ya tiene un id y seria redundancia

#search{
}
#search: focus{
}

entonces como lo hago? he usado el primer codigo de Eclypse y no me funciona ninguna de las dos formas.

los pseudoselectores van sin espacios:

#search:focus

Solucionado, no funcionaba por culpa de un error que ha estado delante de mi durante todo el tiempo.
estaba cerrando con } dobles. es decir cerra el codigo con
}
}

Por eso no funcionaba.

Gracias por la ayuda