Центр в HTML-текстовое поле ввода заполнителя

Question

Центр в 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>

523 9

html css

9 ответов:

Comments

Ничего не найдено.

prarthana.m · Accepted Answer · 2014-10-14 19:56:28

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

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

Jamie Dixon · Accepted Answer · 2011-09-12 00:53:50

input{
   text-align:center;
}
все, что вам нужно.

пример работающего в FF6. Этот метод, похоже, не совместим с кросс-браузером.

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

Erick Petrucelli · Accepted Answer · 2011-09-12 00:53:35

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

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

EDIT

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

таким образом, стиль будет работать:
input.placeholder {
    text-align: center;
}

Denis · Accepted Answer · 2015-07-03 16:37:53

Он отлично работает для моих нужд, вы должны проверить совместимость для Вашего браузера, У меня не было проблем, потому что я не заботился о обратной совместимости
.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; 
}

Ian David Bocioaca · Accepted Answer · 2016-03-18 21:33:11

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

    <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 здесь

Rudresh Bhatt · Accepted Answer · 2016-06-16 14:38:18

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

Rani Utami · Accepted Answer · 2017-10-15 16:45:18

можно попробовать так :
input[placeholder] {
   text-align: center;
}

Ankit Jaiswal · Accepted Answer · 2018-05-04 16:15:25

вы можете использовать также Этот способ, чтобы написать css для заполнителя
input::placeholder{
   text-align: center;
}

Wɑɳɗɛʀ Souzɑ · Accepted Answer · 2018-08-04 05:51:24

input:: placeholder{ выравнивание текста: по центру; }

работал правильно, @Ankit Jaiswal