firefox textarea placeholder padding

Question

I am having some trouble editing placeholder's CSS with a textarea item. It works fine in every browser except firefox. The placeholder (in firefox) takes every CSS attribute except padding. Below is the minimum code and a JSFiddle reproducing the problem

<textarea rows="4" name="mensaje" placeholder="CONSULTA" required="required" ></textarea>

::-webkit-input-placeholder {
    color: #FFF;
    text-align:left;
    font-size:11px;
    padding:5px;
}
:-moz-placeholder { /* Firefox 18- */
    color: #FFF;
    text-align:left;
    font-size:11px;
    padding:5px;
}
::-moz-placeholder {  /* Firefox 19+ */
    color: #FFF;
    text-align:left;
    font-size:11px;
    padding:5px;
}
:-ms-input-placeholder {  
    color: #FFF;
    text-align:left;
    font-size:11px;
    padding: 5px;
}

https://jsfiddle.net/1wxqdh63/

Did you try googling it? try http://stackoverflow.com/questions/4374537/how-to-force-firefox-to-render-textarea-padding-the-same-as-in-a-div or this http://stackoverflow.com/questions/24923424/textarea-padding-inconsistency-in-firefox-and-chrome or this http://stackoverflow.com/questions/16514091/textarea-and-div-padding-differences-in-firefox — Adam Buchanan Smith, Jun 27 '16 at 16:00
@AdamBuchananSmith I did google, but I didn't find those posts, I found others which didn't solve my issue. Thank you for the links — pablito.aven, Jun 27 '16 at 16:12

score 2 · Accepted Answer · answered Jun 27 '16 at 16:04

instead of giving padding:5px to the placeholder, give it to textarea. that way you are sure you won't have any problems;
see here jsfiddle

code :

textarea { 
padding:5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
::-webkit-input-placeholder {
    text-align:left;
    font-size:11px;
}
:-moz-placeholder { /* Firefox 18- */
    text-align:left;
    font-size:11px;
}
::-moz-placeholder {  /* Firefox 19+ */
    text-align:left;
    font-size:11px;
}
:-ms-input-placeholder {  
    text-align:left;
    font-size:11px;
}

html :

<textarea rows="4" name="mensaje" placeholder="CONSULTA" required="required" >  </textarea>

This worked fine, I just had to set that `textarea` css to firefox only or else it doubled the padding in every other browser. Thank you — pablito.aven, Jun 27 '16 at 16:16

firefox textarea placeholder padding

1 Answers1