Заполнитель поля текстового поля в формате HTML

Как я могу центрировать выравнивание позиции поля ввода в форме 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>

Ответ 1

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

::-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; 
}

Ответ 2

input{
   text-align:center;
}

- это все, что вам нужно.

Рабочий пример в FF6. Этот метод, похоже, не совместим с кросс-браузером.

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

Ответ 3

Элемент-заполнитель 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;
}

Ответ 4

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

.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; 
}

Ответ 5

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

    <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>

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

Ответ 6

вы также можете использовать этот способ для записи css для placeholder

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

Ответ 7

::-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;
}

Ответ 8

Вы можете попробовать следующее:

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

Ответ 9

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

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