Lindow Lindow - 3 years ago 333
CSS Question

Placeholder not working with internet explorer

I've been struggling for some hours now and I need to understand, why my website (using Drupal 7.50) isn't showing any placeholder on Internet Explorer 11?

I've already tried lots of things I've seen, just as these :

Syntax error, unrecognized expression: '[placeholder]'

I also tried custom Javascript from other stackoverflow posts but those placeholder are still not shown.

I also tried to change the CSS just as this but without success :

:-ms-input-placeholder { /* IE10–11 */
color: #ccc !important;
font-weight: 400 !important;

::-ms-input-placeholder { /* Edge */
color: #ccc;
font-weight: 400;

::placeholder { /* CSS Working Draft */
color: #ccc;
font-weight: 400;

I'm really lost and been struggling for a while, any suggestions on how to resolve this issue ?


Here's an exemple of an input I'm using:

<input required="required" placeholder="Votre âge (ex:28)" class="form-control form-text required" id="edit-submitted-age" name="submitted[age]" value="" size="60" maxlength="128" autocomplete="off" type="text">


I might found a way but I'm not sure, I saw that it's working when I change the site compatibility mode from 9 (default) to 10 or 11. So if there is a way to set a compatibility mode when accessing the website then it's resolved.

Answer Source

Finally found how to resolve this issue, the emulation was set at 9 as default on the debugger's screen even if internet explorer 11 was being used, so I added this on the head tag of the website.

  <meta http-equiv="X-UA-Compatible" content="IE=11">

Which I think changes the the compatability format to IE11, and it works on my computers since then.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download