Question

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

这是我尝试过的：

HTML

<form><input class="tbsearchbar" type="search" name="search_tb" placeholder="Test"></form>

CSS

placeholder {
    padding-top: 10px;
}

Answer 1

只需在输入中添加填充：

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

Answer 2

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
form{
    max-width: 400px;
    padding: 25px;
}
.tbsearchbar{
    width: 100%;
    padding: 10px;
    display: block;
    border: 2px solid #ccc;
    outline: none;
}
.tbsearchbar:focus{
    border: 2px solid #222;
}

.tbsearchbar::-webkit-input-placeholder { color: #f00;}
.tbsearchbar:-moz-placeholder {color: #f00;}
.tbsearchbar::-moz-placeholder {color: #f00;}
.tbsearchbar:-ms-input-placeholder {color: #f00;}

<form>
    <input class="tbsearchbar"  type="search" name="search_tb" placeholder="Test" />
 </form>

Answer 3

试试这个

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

Answer 4

这是这样做的恰当方式

DEMO

适用于所有不同浏览器的

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

Answer 5

这适用（在Chrome上测试）：

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

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

5 个答案: