Buenas tardes [forCoders],

El post de hoy será rápido y conciso. Os voy a enseñar como empujar el texto que hay dentro de un input text.

Contexto

Como sabréis, todo va a modas, gustos, colores… y hay mucha gente que le gusta los bordes redondeados. Esto provoca que quieran redondear hasta los <input type="test" />. Si el redondeo es demasiado pronunciado, nos podemos encontrar que el texto o placeholder están comidos por los borders del input.

Solución

En esta situación me encontré, y como lo solucioné?

input {
  text-indent: 50px;
}

Si, con tan solo añadir esta línea de CSS a un input, esta se encarga de empujar hacia la derecha, el texto interno de un <input type="test" />. Con añadirlo por CSS a nuestro elemento, definir los píxeles que queremos desplazar y ya lo tenemos! También funciona en textareas y cualquier campo de texto.

Espero que os sea de mucha utilidad y no perdáis tiempo buscando por internet!