0
Unicode Bidirectional override fails for Input Placeholders.

Unicode Bidirectional fails for Input placeholder , below is the MARKUP with html and CSS(having rtl implementation and unicode bidirectional overide) and output for the same. 

<!DOCTYPE html>
<html>
<head>
  <style>
      * {
      direction: rtl !important;
      unicode-bidi: bidi-override !important;
    }
  </style>
</head>
  <body>

    <h1>The unicode-bidi Property</h1>

    <div>Some text. Default writing direction.</div>
    <div class="ex1">Some text. Right-to-left direction.</div>
    <input placeholder="abc def"/>

  </body>
</html>

The output with failing bidirectional for placeholder

https://www.w3schools.com/code/tryit.asp?filename=G37SI0TRBPPM

Partho Ghosh
  • 43
  • 9

1 Answers1

0

You need to add placeholder css:

Here is the updated fiddle:

* {
  direction: rtl;
  unicode-bidi: bidi-override;
}

input[type="text"]:-moz-placeholder {
  unicode-bidi: bidi-override;
}

input[type="text"]:-ms-input-placeholder {
  unicode-bidi: bidi-override;
}

input[type="text"]::-webkit-input-placeholder {
  unicode-bidi: bidi-override;
}
<!DOCTYPE html>
<html>

<head>

</head>

<body>

  <div class="ex1">Some text. Right-to-left direction.</div>
  <input type="text" placeholder="abc def" />

</body>

</html>
Vikas Jadhav
  • 4,597
  • 2
  • 19
  • 37
  • check my fiddle you need to add input type="text" then it will work or remove this from css [type="text"] – Vikas Jadhav Apr 18 '19 at 06:54
  • Seems unicode bidi doesnt work for Input in IE , Any way through ?? [ https://www.w3schools.com/code/tryit.asp?filename=G4BHSGSW4EY0] – Partho Ghosh May 24 '19 at 05:58