Как установить прописку текста заполнителя

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

попробовать этот

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

Answer 3

Это подходящий способ сделать это

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 4

*{ 
 
    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>