Question

i have a simple :

<input type="text" placeholder="search .." value="" id="search"/>

i just added some cs rules like:

#search{
padding:2%;
text-indent:1%;
width:30%;
}

but when i try the same input in different browsers like FF/Chrome i see somenthing wrong , for example in chrome the text line-height inside the input is different and placeholder still remain also when focus inside input, while on FF is all ok and placeholder fadeout when i focus inside input… any good rule/rules to fix line-height and text-indent and placeholder fade for all(almost all) browsers?

Answer 1

It’s a feature in Chrome that the placeholder text does not disappear on focus but only on input. Should you wish to override that, you need to use JavaScript (pretty much defeating the idea of placeholder).

The line height is not changed by any settings you have disclosed. It may vary across browsers due to different defaults.

The text-indent property applies to block containers only. To set spacing on the left, which seems to be the idea here, use padding-left, preferably using the em unit. It is not robust to make the spacing depend on the element’s width, especially if that width is set as relative to the available width.