Placeholder text-align

Question

I am using the following style for placeholder, but it turns the input text (when i start typing) to start from right to left. Now i am seeing this example, it is just text-align, but why mine is formatting wrong? Here is the fiddle for my example

input[placeholder="Required"]{
    text-align: right;
}

andreas · Accepted Answer · 2021-07-12T08:24:33.783

6

Your selector input[placeholder="Required"] selects an input with a placeholder attribute, not the placeholder itself.

Use the selectors given in your example:

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

<form method="post">
  <div class="blocks">
    <label for="fullname">Full Name</label>
    <input type="text" id="fullname" name="name" placeholder="Required">
  </div>
  <div class="blocks">
    <label for="Email">Email Address</label>
    <input type="Email" id="Email" name="email" placeholder="Required">
  </div>
</form>

edited Jul 12 '21 at 08:24

answered Oct 25 '16 at 22:40

andreas

16,357
12
72
76

what is the difference between `input::-webkit-input-placeholder` and `input[placeholder="Required"]` – localhost Oct 25 '16 at 23:08
As I explained in my answer: The first one selects the placeholder text and the second one selects the input element – andreas Oct 25 '16 at 23:10
so what will be the syntax if i do it without different browsers syntax, a simple selection for input element? – localhost Oct 25 '16 at 23:30
1

For placeholder? It's just `::placeholder` – andreas Oct 25 '16 at 23:34

score 1 · Answer 2 · answered Oct 25 '16 at 22:40

Because in the example it styles the placeholder and not the input element (like you do).

input[placeholder="Required"]::-moz-placeholder{ text-align: right; }
input[placeholder="Required"]::-ms-input-placeholder{ text-align: right; }
input[placeholder="Required"]::-webkit-input-placeholder{ text-align: right; }

Updated demo: https://jsfiddle.net/z1zuo69q/2/

Placeholder text-align

2 Answers2

Linked