text-align: right; only for placeholder?
HtmlCssPlaceholderHtml Problem Overview
how can active text-align: right;
only for placeholder?
<input type="text" name="airline_search" style="direction: ltr; border: none;" placeholder="ارلاین">
i want use of direction: ltr;
for text(that typed to inpute), and text-align: right;
for placeholder.
Html Solutions
Solution 1 - Html
/* webkit solution */
::-webkit-input-placeholder { text-align:right; }
/* mozilla solution */
input:-moz-placeholder { text-align:right; }
Solution 2 - Html
Or try it with a :focus
event:
input[type='text']{
text-align:right;
}
input[type='text']:focus{
text-align:left;
}
This way, any placeholder even hard-coded will be held on right, and any text you type when focused will be on right. On the other hand, when you lose the focus, the alignement becomes right again.
Solution 3 - Html
It's better to set CSS style for placeholder as @Hnatt mentioned. I used it with setting direction and the complete list of the selector for known browsers as below:
::-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;
}
Hope this help.
Solution 4 - Html
As of year 2020, CSS selector ::placeholder
is supported in all major browsers except Internet Explorer:
input::placeholder {
text-align: right;
}
Edge requires vendor prefix:
input::-webkit-input-placeholder {
text-align: right;
}
Solution 5 - Html
input::-webkit-input-placeholder {
direction: rtl;
text-align: left;
}
Solution 6 - Html
using inline-jquery
onkeyup="if($(this).val()==''){ $(this).css({'text-align':'right'})} else{ $(this).css({'text-align':'left'})}"
Solution 7 - Html
The post of Villi Katrih is right, but miss in the direction. You should use:
direction: rtl; text-align: left;
'direction' affects the placeholder text placement, while 'text-align' affects to the content of the input.
<input type="text" placeholder="Sample" style="direction: rtl; text-align: left;">
HTH.
Solution 8 - Html
::placeholder
pseudo-element is still a working draft and it has a very limited number of supported CSS properties.
> All properties that apply to the ::first-line pseudo-element also apply to the ::placeholder pseudo-element.
No additional Properties are stated, but it has been noted people would like text-align
to be supported.
So from the fairly small list of supported properties (found here), the only correct way you could achieve this would be if your placeholder text was only one word long.
This would allow you to take advantage of the supported word-spacing
property by prefixing a character and then hide it.
This probably doesn't work because it doesn't use browser prefixes.
input {
width: 200px;
background-color: #fff!important;
}
input::placholder {
word-spacing: 155px;
}
input::placholder:first-letter {
color: #fff!important;
}
<input type="text" name="airline_search" style="direction: ltr; border: none;" placeholder="- ارلاین">
This should work
input {
width: 200px;
background-color: #fff!important;
}
input::placholder {
word-spacing: 155px;
}
input::placholder::first-letter {
color: #fff!important;
}
/* browser support */
input::-webkit-input-placeholder {
word-spacing: 155px;
}
input:-moz-placeholder {
word-spacing: 155px;
}
input::-moz-placeholder {
word-spacing: 155px;
}
input:-ms-input-placeholder {
word-spacing: 155px;
}
input::-webkit-input-placeholder::first-letter {
color: #fff!important;
}
input:-moz-placeholder:first-letter {
color: #fff!important;
}
input::-moz-placeholder::first-letter {
color: #fff!important;
}
input:-ms-input-placeholder::first-letter {
color: #fff!important;
}
<input type="text" name="airline_search" style="direction: ltr; border: none;" placeholder="- ارلاین">
But as browsers support thing they shouldn't and don't support thing they should you could just try this.
This isnt supposed to work .
input::-webkit-input-placeholder {
/* WebKit browsers */
text-align: right;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
text-align: right;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ but I'm not sure about working */
text-align: right;
}
input:-ms-input-placeholder {
/* Internet Explorer 10 */
text-align: right;
}
input::placeholder {
text-align: right;
}
<input type="text" name="airline_search" style="direction: ltr; border: none;" placeholder="ارلاین">
FYI direction: ltr;
manages the cursor position and the flow of text, as a placeholder doesn't have a cursor or editable text it wont do anything.
Solution 9 - Html
did you try add it in the style?
<input type="text" name="airline_search" style="direction: ltr; text-align: right; border: none;" placeholder="ارلاین">
or just set an outside div like this:
<div style="direction: rtl;">
<input type="text" name="airline_search" style="text-align: right; border: none;" placeholder="ارلاین">
</div>
should work.
Solution 10 - Html
You can use this code. By this You can use of input in real direction auto and enjoy of using correct rtl placeholder.
//jQuery
(function($) {
$.fn.dir_auto = function() {
var selector = '.inputs-nyn[dir="auto"]';
var sclass = "auto-nyn05";
var ftime = true;
if ( $(selector).length ) {
$(document).on("keyup", selector , function() {
if( ftime || !$(this).val() ){
if( !$(this).val() ){
$(this).addClass(sclass);
ftime = true;
}
else{
$(this).removeClass(sclass);
ftime = false;
}
}
});
}
};
})(jQuery);
$(document).ready(function() {
$.fn.dir_auto();
});
//css
body{
direction: rtl;
}
.inputs-nyn.auto-nyn05[dir="auto"] {
direction: rtl;
}
.inputs-nyn[dir="auto"]::placeholder {
text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- HTML -->
<input class="inputs-nyn auto-nyn05" dir="auto" placeholder="ارلاین" type="text">
Solution 11 - Html
<style>
::placeholder {/* Firefox */
text-align: right;}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
text-align: right;}
::-ms-input-placeholder { /* Microsoft Edge */
text-align: right;} </style>
<input type="text" placeholder="تست">