How to set the padding of placeholder text

问题:

I'm using an input tag and have set a placeholder value in it. Now, I want to set the padding for the placeholder text inside it, but I can't.

Here is what I've tried:

HTML

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

CSS

placeholder {
    padding-top: 10px;
}

回答1:

Just add padding to the input like this:

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

Change only placeholder 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;
}

回答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>

回答3:

This is the appropriate way of doing so

DEMO

CSS for all different browsers.

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

回答4:

This works (tested on Chrome):

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

For all browsers:

#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:

try this

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