Como alinhar textos dentro de uma entrada?


208

Para todas as entradas padrão, o texto que você preenche começa à esquerda. Como você faz isso começar à direita?


2
Isso está mudando os campos para serem compatíveis com o idioma da direita para a esquerda?
S. Albano

entrada {alinhamento de texto: direita; }
Rasika em

Respostas:


327

Use a propriedade alinhar texto no seu CSS:

input { 
    text-align: right; 
}

Isso entrará em vigor em todas as entradas da página.
Caso contrário, se você deseja alinhar o texto de apenas uma entrada, defina o estilo embutido:

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

24

Tente isso em seu CSS:

input {
text-align: right;
}

Para alinhar o texto no centro:

input {
text-align: center;
}

Mas, ele deve estar alinhado à esquerda, pois esse é o padrão - e parece ser o mais fácil de usar.



9

A resposta aceita aqui está correta, mas gostaria de adicionar um pouco de informação. Se você estiver usando uma biblioteca / estrutura como o bootstrap, podem ser criadas classes para isso. Por exemplo, o bootstrap usa a text-rightclasse Use-o assim:

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

Como nota, isso também funciona em outros tipos de entrada, como numérico, como mostrado acima.

Se você não estiver usando uma boa estrutura como o bootstrap, poderá criar sua própria versão dessa classe auxiliar. Semelhante a outras respostas, mas não vamos adicioná-lo diretamente à classe de entrada, para que não se aplique a todas as entradas do seu site ou página; talvez esse não seja o comportamento desejado. Portanto, isso criaria uma classe css fácil e agradável para alinhar as coisas corretamente, sem a necessidade de um estilo embutido ou afetando todas as caixas de entrada.

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

Agora você pode usar esta classe exatamente da mesma forma que as entradas acima com class="text-right". Eu sei que não está salvando tantas teclas, mas torna seu código mais limpo.


3

Se você quiser alinhar à direita depois que o texto perder o foco, tente usar o modificador de direção. Isso mostrará a parte correta do texto depois de perder o foco. por exemplo, útil se você deseja mostrar o nome do arquivo em um caminho 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>

No momento, o seletor not é bem suportado: Suporte ao navegador


0

@ Html.TextBoxFor (model => model.IssueDate, new {@class = "control-form", nome = "inv_issue_date", id = "inv_issue_date", id = "inv_issue_date", title = "Selecionar data de emissão da fatura", espaço reservado = "dd / mm / aaaa ", style =" alinhamento de texto: centro; "})


-5

Sem CSS: use a propriedade STYLE da entrada de texto

STYLE = "alinhamento de texto: direita;"


11
Ainda é CSS, apenas CSS embutido.
Martin Hansen

2
O atributo Style é usado para criar CSS embutido. O código text-align:righté definitivamente CSS.
Ron
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.