Центрирование ввода HTML Текстовое поле Заполнитель

154

Как я могу центрировать выравнивание заполнителя поля ввода в HTML-форме?

Я использую следующий код, но он не работает:

CSS ->

input.placeholder {
    text-align: center;
}
.emailField {
    top:413px;
    right:290px;
    width: 355px;
    height: 30px;
    position: absolute;
    border: none;
    font-size: 17;
    text-align: center;
}

HTML ->

<form action="" method="POST">
    <input type="text" class="emailField" placeholder="support@socialpic.org" style="text-align: center" name="email" />
    <!<input type="submit" value="submit" />  
</form>

html css

— Максимум_
источник

Не совсем ответ, но jQuery Mobile делает это, так что вы можете посмотреть, как они этого добиваются.

— Эвансс

Для меня ваш код работает, когда вы избавляетесь от input.placeholderбиты. Выравнивание текста внутри ввода по центру также выравнивает заполнитель.

— Cannicide

284

Если вы хотите изменить только стиль заполнителя

::-webkit-input-placeholder {
   text-align: center;
}

:-moz-placeholder { /* Firefox 18- */
   text-align: center;  
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align: center;  
}

:-ms-input-placeholder {  
   text-align: center; 
}

— prarthana.m
источник

5

Это прекрасно работает для большинства полей ввода, но не для даты типа. Вы знаете, как сделать так, чтобы это работало на сегодняшний день?

— Корнелиус Паркин

92

input{
   text-align:center;
}

это все, что тебе нужно.

Рабочий пример в FF6. Этот метод не совместим с разными браузерами.

Ваш предыдущий CSS пытался центрировать текст элемента ввода, который имел класс «заполнитель».

— Джейми Диксон
источник

5

Я не хочу центрировать заполнитель, а также текст, введенный в поле

— max_11

1

Да. Это то, что делает этот пример. Заполнитель - это текст в поле.

— Джейми Диксон

2

это не работает в примере. В этом примере заполнитель выравнивается по левому краю.

— max_11.09.11

Осторожно, если вы используете библиотеки, такие как Bootstrap или Semantic UI, вы должны добавить встроенный стиль, то есть, <input type="text" placeholder="Search..." style="text-align: right;">чтобы он работал. Или добавьте important!в свое правило CSS, если вы используете внешние файлы.

— Бехдад

Похоже, что проблема у вас max_ это просто проблема совместимости браузера. Это прекрасно работает в большинстве основных браузеров, кроме Safari.

— Cannicide

7

Заполнитель HTML5 может быть стилизован для тех браузеров, которые принимают этот элемент, но по-разному, как вы можете видеть здесь: http://davidwalsh.name/html5-placeholder-css .

Но я не верю, что text-alignэто будет интерпретироваться браузерами. По крайней мере, в Chrome этот атрибут игнорируется. Но вы всегда можете изменить другие вещи, например color, font-sizeи font-familyт. Д. Я предлагаю вам переосмыслить свой дизайн, возможно ли удалить это поведение центра.

РЕДАКТИРОВАТЬ

Если вы действительно хотите, чтобы этот текст был центрирован, вы всегда можете использовать некоторый код или плагин jQuery для имитации поведения заполнителя. Вот пример этого: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html .

Таким образом, стиль будет работать:

input.placeholder {
    text-align: center;
}

— Эрик Петручелли
источник

7

Вы можете сделать так:

    <center>
    <form action="" method="POST">
    <input type="text" class="emailField" placeholder="support@socialpic.org" style="text-align: center" name="email" />
    <input type="submit" value="submit" />  
</form>
    </center>

Рабочий CodePen здесь

— Ян Дэвид Бочоака
источник

Только это работает для меня. Возможно, стили, добавленные в HTML, имеют больший приоритет или имеют приоритет над всеми другими стилями.

— Гокул

5

Он отлично работает для моих нужд, вы должны проверить совместимость для вашего браузера, у меня не было проблем, потому что мне не нужна обратная совместимость

.inputclass::-webkit-input-placeholder {
text-align: center;
}
.inputclass:-moz-placeholder { /* Firefox 18- */
text-align: center;  
}
.inputclass::-moz-placeholder {  /* Firefox 19+ */
text-align: center;  
}
.inputclass:-ms-input-placeholder {  
text-align: center; 
}

— Денис
источник

3

Разве этот ответ не является прямой копией другого ответа?

— Анвар

3

Вы также можете использовать этот способ, чтобы написать CSS для заполнителя

input::placeholder{
   text-align: center;
}

— Анкит Джайсвал
источник

2

Вы можете попробовать так:

input[placeholder] {
   text-align: center;
}

— Рани Утами
источник

1

::-webkit-input-placeholder {
 font-size: 14px;
 color: #d0cdfa;
 text-transform: uppercase;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}
:-moz-placeholder { 
 font-size:14px;
 color: #d0cdfa;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}
::-moz-placeholder { 
 font-size: 14px;
 color: #d0cdfa; 
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
} 
:-ms-input-placeholder { 
 font-size: 14px; 
 color: #d0cdfa;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}

— Рудреш Бхатт
источник

0

Используя приведенный ниже фрагмент кода, вы выбираете заполнитель внутри ввода, и любой код, помещенный внутрь, влияет только на заполнитель.

input::-webkit-input-placeholder {
      text-align: center
}

— Брэндон Мэй
источник

Этот ответ, кажется, не предлагает ничего другого по сравнению с принятым ответом .

— Антон Меньшов

Этот ответ дает подсказку о том, как изменить заполнитель только одного конкретного элемента в отличие от всех заполнителей. Например .foo::-webkit-input-placeholder { … }.

— Хенрик Н

0

Вы можете использовать set в классе, как показано ниже, и установить для ввода текстовый класс
CSS:

 .place-holder-center::placeholder {
        text-align: center;
    }

HTML:

<input type="text" class="place-holder-center">

— Мохаммад Далири
источник