it-swarm-pt.tech

iOS 5.0 Safari não centralizador de posição verticalmente na caixa de texto

Quero centralizar verticalmente o texto inserido nas caixas de texto de entrada na página. 

Uma maneira típica de conseguir isso é definir a altura e a altura da linha iguais. Isso funciona no pré iOS 5.0 Safari. 

Contudo; no iOS 5, o Safari exibe o texto digitado verticalmente centrado ... Mas o texto de espaço reservado e o cursor aparecem alinhados na parte superior.

.txtBox {
    line-height: 3em;
    height: 3em;
}

<input type="text" class="txtBox" placeholder="Name"></input>

Alguém mais que enfrenta esta questão?

26
Nirmal Patel

Definir line-height: 1; parece corrigir isso.

36
Jesse

Para mim existe apenas uma solução que parece quase perfeita em todos os navegadores que testei (Chrome, FF, Safari (+ iOS), IE10):

line-height: normal;

Soluções como line-height: 100% e line-height: 1; parecem estar alinhadas com o topo da entrada, especialmente no Chrome.

http://jsfiddle.net/5Vc3z/

Comparação:

http://jsfiddle.net/5Vc3z/1/

28
Marcel

Você deve usar porcentagem para a altura da linha.

.txtBox {
       line-height: 100%;
       height: 3em;
    }
<input type="text" class="txtBox" placeholder="Name"></input>
8
andychukse

Supondo que você está apenas tentando fazer com que o campo de entrada pareça maior, você pode usar padding:

.txtBox {
    font-size: 1em;
    padding: 1em auto;
}

</ s> Além disso, seu campo de entrada deve ser:

<input type="text" class="txtBox" placeholder="Name" />

Editar

Desculpe, demorou um pouco. Parece que placeholder pode ser estilizado individualmente e/ou herdar estilos do pai. Infelizmente, há muitos estilos que não são suportados pelo Safari neste momento.

O seguinte blog tem detalhes sobre as técnicas de estilo e quais não são suportados em certos navegadores:

http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/

2
My Head Hurts

Eu fiquei preso nessa questão por um bom tempo apesar de usar 

input::-webkit-input-placeholder { line-height:normal!important; } 

Acontece que ter uma altura de linha no elemento de entrada, por si só, estava quebrando minha entrada :: webkit-input-placeholder line-height. 

Solução estendida:

Eu removi a altura da linha no meu estilo de entrada e corrigi meu problema.

0
Ariella