Geek asks and answers

The placeholder always aligns on the left in safari

The placeholder text is aligned to the left in the Safari browser. It works well in all other browsers.

HTML:

<input type="text" class="form-input" placeholder="Email Address" />

CSS

.form-input {
    width: 235px;
    height: 15px;    
    border: solid 5px #fff;
    text-align: center;
    padding: 10px 0px 10px 0px; 
    font-family: 'Helvetica-Bold';
}

See the demo in fiddle

I want to align placeholderin the middle of the field input. How to do it?

+3
source share
2 answers

Try it work

CODE:

input { 
   text-align:center;
}

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

will work in safari 6 as a placeholder text-align property not working in Safari 5.1 or earlier

see the support table here http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/

+2
source

- ( ) : text-indent: Xpx;.

reset text-indent 0, input:focus .

0

More articles:


All Articles