text-align:right; 仅限占位符？

Question

如何text-align: right;只为占位符活跃？

<input type="text" name="airline_search" style="direction: ltr;  border: none;" placeholder="??????">

我希望使用direction: ltr;for text(键入inpute)和text-align: right;占位符.

Answer 1

/* webkit solution */
::-webkit-input-placeholder { text-align:right; }
/* mozilla solution */
input:-moz-placeholder { text-align:right; }

Answer 2

或者尝试一下:focus活动:

input[type='text']{
text-align:right;
}

input[type='text']:focus{
text-align:left;
}

这样,任何占位符甚至硬编码都将保持在右侧,而您在聚焦时键入的任何文本都将在右侧.另一方面,当你失去焦点时,对象再次变得正确.

Answer 3

最好为@Hnatt提到的占位符设置CSS样式.我通过设置方向和已知浏览器的选择器的完整列表来使用它

::-webkit-input-placeholder { /* WebKit browsers */
    direction: rtl;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    direction: rtl;
}
::-moz-placeholder { /* Mozilla Firefox 19+ but I'm not sure about working */
    direction: rtl;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    direction: rtl;
}

希望这有帮助.如果是这样,请标记为答案.

Answer 4

截至 2020 年，::placeholder除 Internet Explorer 之外的所有主要浏览器都支持CSS 选择器：

input::placeholder {
    text-align: right;
}

Edge 需要供应商前缀：

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

来源：我可以使用吗，MDN