占位符文本对齐

Question

我使用以下样式占位符，但它将输入文本（当我开始输入时）从右向左启动。现在我看到这example，它只是文本对齐，但为什么我的格式错误？这里是fiddle我的例子

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

Answer 1

你选择input[placeholder="Required"]选择一个占位符属性，而不是占位符本身的输入。

使用在你的例子给出的选择：

input::-webkit-input-placeholder { 
 
    text-align: right; 
 
} 
 
input:-moz-placeholder { 
 
    text-align: right; 
 
} 
 
input::-moz-placeholder { 
 
    text-align: right; 
 
} 
 
input:-ms-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>

Answer 2

因为在例如，它的风格占位符，而不是输入元素（像你一样）。

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; } 

更新演示：https://jsfiddle.net/z1zuo69q/2/