3

Placeholder text gets aligned left in safari browser. It is working good in all other browser.

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

Please see the demo in fiddle

I want to align the placeholder at center of the input box. How to do this?

Volker E.
  • 5,911
  • 11
  • 47
  • 64
user2681579
  • 1,413
  • 2
  • 23
  • 50
  • Similar question: http://stackoverflow.com/q/7381446/2126792 – pschueller Feb 06 '14 at 04:39
  • See this answer: http://stackoverflow.com/a/14986215/2126792 (also from another duplicate question). – pschueller Feb 06 '14 at 04:45
  • Regarding the answers and comments in the other question threads, that seems to be an exclusive issue in Saf 5/5.1 on Windows 7, with no real solution apart from version-specific browser hacks. – Volker E. Oct 14 '14 at 16:18

2 Answers2

2

Try this it's working

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 placeholder text-align property not working in safari 5.1 or older version

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

Krunal Panchal
  • 778
  • 7
  • 14
1

A more compact alternative and cross-browser way to do this (including much older browsers), is to use: text-indent: Xpx;.

Then you reset the text-indent to 0, on input:focus for the actual text.

hexalys
  • 5,177
  • 3
  • 31
  • 56
  • Also those two references are useful in terms of which browser support what: [Making HTML5 input placeholder text behave in Safari](http://blog.omgmog.net/post/making-html5-input-placeholder-text-behave-in-safari/) and [Styling the HTML5 placeholder](http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/) – hexalys Oct 21 '14 at 02:20