Espaço reservado para o campo de texto de entrada HTML central

153

Como posso centralizar o alinhamento do espaço reservado do campo de entrada em um formato html?

Estou usando o seguinte código, mas ele não funciona:

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

— max_
fonte

Não é realmente uma resposta, mas o jQuery Mobile faz isso, então você pode querer ver como eles o alcançam.

— Evanss

Para mim, seu código funciona quando você se livra do input.placeholderbit. Alinhar o texto dentro da entrada para o centro também alinha o espaço reservado.

— Cannicide

283

Se você deseja alterar apenas o estilo do espaço reservado

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

5

Isso funciona bem para a maioria dos campos de entrada, mas não para o tipo data. Você sabe como fazê-lo funcionar ainda hoje?

— Cornelius Parkin,

92

input{
   text-align:center;
}

é tudo o que você precisa.

Exemplo de trabalho no FF6. Este método não parece ser compatível com vários navegadores.

Seu CSS anterior estava tentando centralizar o texto de um elemento de entrada que tinha uma classe de "espaço reservado".

— Jamie Dixon
fonte

5

Não quero centrar o espaço reservado,

— nem

1

Sim. É isso que este exemplo faz. O espaço reservado é o texto no campo.

— 21711 Jamie Dixon

2

isso não funciona no exemplo. No exemplo, o espaço reservado é deixado alinhado.

— max_

Cuidado, se você estiver usando bibliotecas como Bootstrap ou UI Semântica, adicione o estilo embutido, ou seja, <input type="text" placeholder="Search..." style="text-align: right;">para que ele funcione. Ou adicione important!à sua regra de CSS se você estiver usando arquivos externos.

— Behdad

Parece que o problema que você está tendo no max_ é apenas uma questão de compatibilidade do navegador. Isso funciona bem na maioria dos principais navegadores, exceto o Safari.

— Cannicide

7

O elemento de espaço reservado HTML5 pode ser estilizado para os navegadores que aceitam o elemento, mas de maneiras diferentes, como você pode ver aqui: http://davidwalsh.name/html5-placeholder-css .

Mas não acredito que text-alignisso seja interpretado pelos navegadores. Pelo menos no Chrome, esse atributo é ignorado. Mas você sempre pode mudar outras coisas, como color, font-size, font-familyetc. eu sugiro que você repensar seu projeto seja possível remover este comportamento centro.

EDITAR

Se você realmente deseja que este texto seja centralizado, sempre pode usar algum código ou plugin jQuery para simular o comportamento do espaço reservado. Aqui está uma amostra: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html .

Dessa forma, o estilo funcionará:

input.placeholder {
    text-align: center;
}

— Erick Petrucelli
fonte

7

Você pode fazer assim:

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

Código de trabalho

— Ian David Bocioaca
fonte

Só isso está funcionando para mim. Talvez os estilos adicionados ao HTML tenham mais prioridade ou substituam todos os outros estilos.

— Gokul 26/09

5

Funciona bem para minhas necessidades, você deve verificar a compatibilidade do seu navegador, não tive problemas porque não ligava para compatibilidade com versões anteriores

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

— Denis
fonte

3

Esta resposta não é uma cópia direta de outra resposta?

— Anwar

3

você também pode usar esta maneira de escrever css para espaço reservado

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

— Ankit Jaiswal
fonte

2

Você pode tentar assim:

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

— Rani Utami
fonte

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

— Rudresh Bhatt
fonte

0

Ao usar o snippet de código abaixo, você está selecionando o espaço reservado na sua entrada e qualquer código inserido no local afetará apenas o espaço reservado.

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

— Brandon May
fonte

Esta resposta não parece oferecer nada diferente em comparação com a resposta aceita .

— Anton Menshov

Esta resposta fornece uma dica de como alterar o espaço reservado de apenas um elemento específico em oposição a todos os espaços reservados. Por exemplo .foo::-webkit-input-placeholder { … }.

— Henrik N

0

Você pode usar o conjunto em uma classe como abaixo e definir a entrada da classe de texto
CSS:

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

HTML:

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

— Mohammad Daliri
fonte