Как выровнять тексты внутри ввода?

для всех входных данных по умолчанию текст, который вы заполняете, начинается слева. Как заставить его начать справа?

6 ответов


использовать текст-выровняйте свойство в вашем CSS:

input { 
    text-align: right; 
}

Это вступит в силу во всех входных данных страницы.
В противном случае, если вы хотите выровнять текст только одного ввода, установите стиль inline:

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

попробуйте это в своем CSS:

input {
text-align: right;
}

выровнять текст по центру:

input {
text-align: center;
}

но он должен быть выровнен по левому краю, так как это значение по умолчанию - и кажется наиболее удобным для пользователя.


держи:

input[type=text] { text-align:right }
<form>
    <input type="text" name="name" value="">
</form>

принятый ответ здесь правильный, но я хотел бы добавить немного информации. Если вы используете библиотеку / фреймворк, например bootstrap, для этого могут быть построены классы. Например, bootstrap использует text-right класса. Используйте его так:

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

в качестве примечания это работает и на других типах ввода, таких как numeric как показано выше.

если вы не используете хороший фреймворк, как bootstrap, то вы можете сделать свою собственную версию этого вспомогательного класса. Подобный к другим ответам, но мы не собираемся добавлять его непосредственно в класс ввода, поэтому он не будет применяться к каждому входу на вашем сайте или странице, это может быть нежелательное поведение. Таким образом, это создаст хороший простой класс css для выравнивания вещей без необходимости встроенного стиля или влияния на каждое поле ввода.

.text-right{
    text-align: right;
}
вы можете использовать этот класс точно так же, как входы, с class="text-right". Я знаю, что это не сохранение так много ключевых штрихов, но это делает ваш код чище.

Если вы хотите выровнять его справа после того, как текст потеряет фокус, вы можете попробовать использовать модификатор направления. Это покажет правую часть текста после потери фокуса. например, полезно, если вы хотите показать имя файла в большом пути.

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>

селектор not В настоящее время хорошо поддерживается:поддержка браузеров


без CSS: Используйте свойство STYLE ввода текста

STYLE= " text-align: right;"