5

I am really confused about a CSS problem in IE9 browser. I have a webpage with textarea element with placeholder. I want to text-align: center; the place-holder only,

enter image description here

input text text-align is set to left.

enter image description here

Please see my edits below.

Html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        textarea {
            width: 80%;
            height: 80px;
        }

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

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

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

        :-ms-input-placeholder {
            text-align: center;
        }
    </style>
</head>
<body>
    <textarea rows="2" cols="21" id='txtnote' class="testplaceholder" maxlength="500" placeholder="Note" onblur=""></textarea>
</body>
</html>

Everything works fine in IE 11, Firefox, Chrome in Windows 8 , But when i look this webpage in to IE9 in Windows 7 it's not working

BoltClock
  • 665,005
  • 155
  • 1,345
  • 1,328
Ragesh S
  • 3,727
  • 13
  • 99
  • 131

1 Answers1

0

According to MSDN, in order for this selector to work you need to have at least IE 10. Also, after further investigation -- since it is not supported in IE9 there are other workarounds to getting it to work as desired.

Please check out this SO answer or this alternative JS here.

Community
  • 1
  • 1
David Pine
  • 22,888
  • 9
  • 75
  • 103
  • And this addresses the IE issue how, exactly? The -ms- prefix was already there, so at best this answer addresses the other browsers while conveniently ignoring the subject of the question - IE. – BoltClock Dec 15 '15 at 05:29
  • Originally the question didn't have those details, I have since adjusted my answer. Thank you – David Pine Dec 15 '15 at 12:47
  • @David Thank you for your great support. – Ragesh S Apr 18 '18 at 13:07