unicode-bidi 属性 不适用于 HTML 输入占位符
The unicode-bidi property doesn't work on HTML Input Placeholder
Unicode Bidirectional override fails for Input Placeholders.
输入占位符的 Unicode 双向失败,下面是带有 html 和 CSS(具有 rtl 实现和 unicode 双向覆盖)的 MARKUP 和相同的输出。
<!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
您需要添加占位符css:
这是更新后的 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>
Unicode Bidirectional override fails for Input Placeholders.
输入占位符的 Unicode 双向失败,下面是带有 html 和 CSS(具有 rtl 实现和 unicode 双向覆盖)的 MARKUP 和相同的输出。
<!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
您需要添加占位符css:
这是更新后的 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>