CODEWITHSUNDEEP
htmlcss
RS92
RS92

Reputation: 485

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:

placeholder {
  padding-top: 10px;
}
<form><input class="tbsearchbar" type="search" name="search_tb" placeholder="Test"></form>

Upvotes: 15

Views: 45553

Answers (6)

Jovana J.
Jovana J.

Reputation: 1

None of these answers worked for me. Later I saw in inspect element there are these two default props which are causing the problem:

padding-block: 1px;    // top and bottom padding
padding-inline: 2px;   // left and right padding

so you just need to override it with your values and to add !important at the end (it won't work without it):

padding-block: 5px !important;   
padding-inline: 7px !important;

Upvotes: 0

iPzard
iPzard

Reputation: 2368

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

Upvotes: 2

Bilal Maqsood
Bilal Maqsood

Reputation: 1246

try this 

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

Upvotes: 0

Dmitriy
Dmitriy

Reputation: 4503

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

Upvotes: 3

divy3993
divy3993

Reputation: 5810

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

Upvotes: 0

taxicala
taxicala

Reputation: 21759

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

Upvotes: 21

Related Questions