Editar el "value" de un formulario

Buenas, estoy peleándome con un formulario desde hace unos días y tras varias búsquedas no encuentro la solución. Se trata de un formulario hecho con html. El caso es que quiero cambiar la fuente, tamaño y color del texto que se encuentra dentro de la caja (el value).

Lo he intentado con CSS pero al parecer no se puede hacer. Entonces me imagino que la solución será el Javascript pero mis conocimientos son bastante nulos. ¿Alguien puede ayudarme con esto?

Un saludo y gracias

Por supuesto que se puede cambiar la apariencia de un input con CSS. ¿Por qué dices que no?.

Coloca a tu input un ID en específico (id=input_form por ej). Luego ve al css y le haces la referencia "input#input_form" y luego con las propiedas font-size, color, y font-family puedes cambiar el aspecto de lo que escriba en ese input (estilo de value modificado)

Ese es el problema. El css solo me cambia lo que hay antes del cuadro de texto. Sin embargo lo que yo quiero tocar es lo que hay en el interior, que viene determinado por el value.

Este es mi código:

Código :

<input type="text" class="noFocus" id="correo" width="210px" value="Correo electrónico" style="color:#999;
"/>

y aquí el css:

Código :

#correo {
   background-image:url(images/form.png);
   background-repeat:no-repeat;
   border:none;
   height:30px;
   width:211px;
   margin-left:-16px;
   margin-top:18px;
   font-family:Verdana, Geneva, sans-serif;
}

La última línea es como si no existiera

Eso debería funcionar correctamente. Puede ser que esa fuente sea parecida a la que usas en el resto de la web y no notes la diferencia(prueba poniendo una fuente muy diferente para observar el cambio), o que en el css tengas un estilo posterior que reinicie el valor de la fuente de los "inputs".

Ajá! Ahora funciona, un fallo con una de las letras que lo desmontaba todo. Una pregunta más, ¿puedo limitar el area de texto sin que me corte el background?

El area de texto llega al final del background y queda feo, sin embargo sin pongo un padding-right no funciona, un margin-right corta la parte final del background, ¿alguna idea?

Prueba moviendo los valores:

Código HTML :

<input type="text" size="5" maxlength="10" />