¿Cómo alinear textos dentro de una entrada?


208

Para todas las entradas predeterminadas, el texto que completa comienza a la izquierda. ¿Cómo haces que comience a la derecha?


2
¿Esto está cambiando los campos para que sean compatibles con un idioma de derecha a izquierda?
S. Albano

input {text-align: right; }
Rasika

Respuestas:


327

Use la propiedad de alineación de texto en su CSS:

input { 
    text-align: right; 
}

Esto tendrá efecto en todas las entradas de la página.
De lo contrario, si desea alinear el texto de una sola entrada, configure el estilo en línea:

<input type="text" style="text-align:right;"/> 

25

Prueba esto en tu CSS:

input {
text-align: right;
}

Para alinear el texto en el centro:

input {
text-align: center;
}

Pero, debe estar alineado a la izquierda, ya que ese es el valor predeterminado, y parece ser el más fácil de usar.



9

La respuesta aceptada aquí es correcta, pero me gustaría agregar un poco de información. Si está utilizando una biblioteca / marco como bootstrap, puede haber clases integradas para esto. Por ejemplo, bootstrap usa la text-rightclase. Úselo así:

<input type="text" class="text-right"/> 
<input type="number" class="text-right"/>

Como nota, esto también funciona en otros tipos de entrada, como los numéricos como se muestra arriba.

Si no está utilizando un marco agradable como bootstrap, puede crear su propia versión de esta clase auxiliar. Similar a otras respuestas, pero no vamos a agregarlo directamente a la clase de entrada, por lo que no se aplicará a cada entrada en su sitio o página, esto podría no ser el comportamiento deseado. Entonces, esto crearía una clase css fácil y agradable para alinear las cosas correctamente sin necesidad de un estilo en línea o que afecte a cada cuadro de entrada.

.text-right{
    text-align: right;
}

Ahora puede usar esta clase exactamente igual que las entradas anteriores con class="text-right". Sé que no está guardando tantas pulsaciones de teclas, pero hace que su código sea más limpio.


3

Si desea alinearlo a la derecha después de que el texto pierde el foco, puede intentar usar el modificador de dirección. Esto mostrará la parte correcta del texto después de perder el foco. por ejemplo, útil si desea mostrar el nombre del archivo en una ruta grande.

input.rightAligned {
  direction:ltr;
  overflow:hidden;
}
input.rightAligned:not(:focus) {
  direction:rtl;
  text-align: left;
  unicode-bidi: plaintext;
  text-overflow: ellipsis;
}
<form>
    <input type="text" class="rightAligned" name="name" value="">
</form>

El selector no está actualmente bien soportado: soporte de navegador


0

@ Html.TextBoxFor (model => model.IssueDate, new {@class = "form-control", name = "inv_issue_date", id = "inv_issue_date", title = "Seleccionar fecha de emisión de factura", marcador de posición = "dd / mm / aaaa ", estilo =" alineación de texto: centro; "})


-5

Sin CSS: use la propiedad STYLE de la entrada de texto

STYLE = "text-align: right;"


11
Esto sigue siendo CSS, solo CSS en línea.
Martin Hansen

2
El atributo de estilo se usa para crear CSS en línea. El código text-align:rightes definitivamente CSS.
Ron
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.