占位符文本填充

时间:2014-12-06 08:43:18

标签: css padding

是否可以在占位符文本上设置单独的填充或边距,或者我是否被强制插入

text-align:center;

示例http://www.bootply.com/ei0b9daoqq

1 个答案:

答案 0 :(得分:1)

您必须为每个输入提供另一个类名,并为每个输入提供一个特定的填充Link

HTML

<input class="form one" type="text" name="Name" placeholder="First and Last name"></div>
</div>
<div class="row col-md-3">
<input class="form second" type="email" name="Phone" placeholder="@gmail.com">
 </div>
 <div class="row col-md-3 ">
<input id="email" class="form third" type="tel" name="Zip" placeholder="Zip ">
 </div>

CSS

.form {
background-color: #666;
color:#fff;
}

.second::-webkit-input-placeholder{
color:white;
letter-spacing: 1px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding-left:40px;
 }
.third::-webkit-input-placeholder{
color:white;
letter-spacing: 1px;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 padding-left:50px;
}

.one::-webkit-input-placeholder{
color:white;
letter-spacing: 1px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding-left:80px
}
   .form::-webkit-input-placeholder{
 color:white;
 letter-spacing: 1px;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

 }