Clever Geek Handbook

How to install placeholder text padding

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

Here's what I've tried:

Html

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

CSS

placeholder {
    padding-top: 10px;
}
+3


source to share


5 answers


Just add padding to the input like:

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


source 




*{
    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>
Run codeHide result


+1


source


try it

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


source


This is the appropriate way to do it

DEMO

CSS for all 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;
}
0


source


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


source






More articles:


All Articles