Agregar relleno al campo de entrada de texto HTML

Quiero agregar algo de espacio a la derecha de un para que haya un espacio vacío a la derecha del campo.

Entonces, en lugar de , Me gustaría obtener .

Entonces, el mismo comportamiento solo un espacio vacío a la derecha.

Intenté usar el padding-right , pero eso no parece hacer nada.

¿Hay alguna forma de hacer esto (o simularlo)?

padding-right me funciona en Firefox / Chrome en Windows pero no en IE. Bienvenido al maravilloso mundo de incumplimiento de las normas de IE.

Ver: http://jsfiddle.net/SfPju/466/

HTML

  

CSS

 .foo { padding-right: 20px; } 

Puede proporcionar relleno a una entrada como esta:

HTML:

  

CSS:

 input { width: 250px; padding: 5px; } 

Sin embargo, también agregaría:

 input { width: 250px; padding: 5px; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } 

El tamaño de la caja hace que el ancho de entrada permanezca en 250px en lugar de boost a 260px debido al relleno.

Para referencia .

el relleno derecho debería funcionar. Ejemplo vinculado.

http://jsfiddle.net/8Ged8/

HTML

 

Para otros navegadores:

 .FieldElement input { width: 413px; border:1px solid #ccc; padding: 0 2.5em 0 0.5em; } .searchIcon { background: url(searchicon-image-path) no-repeat; width: 17px; height: 17px; text-indent: -999em; display: inline-block; left: 432px; top: 9px; } 

Para IE:

 .FieldElement input { width: 380px; border:0; } .FieldElement { border:1px solid #ccc; width: 455px; } .searchIcon { background: url(searchicon-image-path) no-repeat; width: 17px; height: 17px; text-indent: -999em; display: inline-block; left: 432px; top: 9px; } 

Puedes resolver esto, tomando la etiqueta de input dentro de un div , luego pon la propiedad de relleno en la etiqueta div . Este trabajo es para mí …

Me gusta esto:

 

y css:

 .paded{ padding-right: 20px; } 
  .input_style { padding-left:20px; }