Html 如何设置占位符文本的填充

我正在使用一个输入标记，并在其中设置了一个占位符值。现在，我想为其中的占位符文本设置填充，但我不能

以下是我尝试过的：

HTML

---

只需向输入添加填充，如下所示：

.tbsearchbar {
    padding-top: 10px;
    color: red; //To add some color.
}

仅更改占位符颜色：

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #909;
}

试试这个

.tbsearchbar {
    padding: 10px;
    color: red;
}

---

这是正确的做法

CSS适用于所有不同的浏览器

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

input[type=search]
{
padding-top:10px;
}

*{
填充：0；
保证金：0；
框大小：边框框；
}
形式{
最大宽度：400px；
填充：25px；
}
.tb搜索栏{
宽度：100%；
填充：10px；
显示：块；
边框：2个实心#ccc；
大纲：无；
}
.tb搜索栏：焦点{
边框：2倍实心#222；
}
.tbsearchbar:：-webkit输入占位符{color:#f00；}
.tbsearchbar:-moz占位符{color:#f00；}
.tbsearchbar:：-moz占位符{color:#f00；}
.tbsearchbar:-ms输入占位符{color:#f00；}

此功能有效（在Chrome上测试）：

对于所有浏览器：

#yourid::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   padding-left: 3px;
}
#yourid::-moz-placeholder { /* Firefox 19+ */
   padding-left: 3px;
}
#yourid:-ms-input-placeholder { /* IE 10+ */
   padding-left: 3px;
}
#yourid:-moz-placeholder { /* Firefox 18- */
   padding-left: 3px;
}

---

好的，谢谢，您知道如何更改此占位符的文本颜色吗？添加颜色：红色；对于我提供的css（红色或任何你喜欢的颜色），你需要为每个浏览器添加一些单独的规则，现在就更新。除了这会改变输入本身的填充。

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

input[type=search]
{
padding-top:10px;
}

#yourid::placeholder {
    padding-left: 3px;
}

#yourid::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   padding-left: 3px;
}
#yourid::-moz-placeholder { /* Firefox 19+ */
   padding-left: 3px;
}
#yourid:-ms-input-placeholder { /* IE 10+ */
   padding-left: 3px;
}
#yourid:-moz-placeholder { /* Firefox 18- */
   padding-left: 3px;
}