Как выровнять по центру поле ввода'placeholder'a в 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="[email protected]" style="text-align: center" name="email" />
<!<input type="submit" value="submit" />
</form>
Если вы хотите изменить только стиль размещения
::-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;
}
input{
text-align:center;
}
это все, что вам нужно.
[Рабочий пример][1] в FF6. Этот метод, по-видимому, не является кроссбраузерным.
Ваш предыдущий CSS пытался выровнять по центру текст элемента ввода, имеющего класс "placeholder".
Вы можете сделать как этот:
<center>
<form action="" method="POST">
<input type="text" class="emailField" placeholder="[email protected]" style="text-align: center" name="email" />
<input type="submit" value="submit" />
</form>
</center>
Элемент HTML5 placeholder может быть стилизован для тех браузеров, которые принимают этот элемент, но по-разному, как вы можете видеть здесь: http://davidwalsh.name/html5-placeholder-css.
Но я не верю, что text-align
будет интерпретироваться браузерами. По крайней мере, в Chrome этот атрибут игнорируется. Но вы всегда можете изменить другие вещи, такие как color
, font-size
, font-family
и т.д. Я предлагаю вам переосмыслить ваш дизайн, если это возможно, чтобы убрать такое поведение центра.
EDIT
Если вы действительно хотите, чтобы текст был выровнен по центру, вы всегда можете использовать какой-нибудь jQuery-код или плагин для имитации поведения placeholder. Вот его пример: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html.
В этом случае стиль будет работать:
input.placeholder {
text-align: center;
}
Это работает хорошо для моих потребностей, вы должны проверить совместимость вашего браузера, Я не'т иметь проблемы, потому что я этого'т уход за обратной совместимости
.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;
}
вы также можете использовать этот способ написать CSS для заполнителя
input::placeholder{
text-align: center;
}
Вы можете попробовать такой :
input[placeholder] {
text-align: center;
}
::-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;
}
Используя приведенный ниже фрагмент кода, Вы выбираете заполнитель внутри вашего ввод, и любой код, помещенный внутри будет влиять только заполнитель.
input::-webkit-input-placeholder {
text-align: center
}