CODEWITHSUNDEEP
css
user826323
user826323

Reputation: 2338

css padding the placeholder text inside the text field

enter image description here

I am trying to pad the bottom area for the placeholder text, because it is too close to the line. but i am not sure what property is going to work. Here is my css. And also, another problem is that when I open it on firefox, the magnifying icon is about 1 pixel higher than the line. It looks fine on chrome. Does anybody know?

Thanks.

.search_input{
    font-family: Helvetica;
    font-size:14px;
    border:1px solid #000000;
    border-top:1px;
    border-right: -0px;
    border-left: 0px;
    margin-left: 3px;
    margin-right: -23px;
    margin-top: 6px;
    width: 150px;
    box-sizing: border-box;
}

#tfnewsearch input:focus {
    outline: 0;
    background: #fff;
    -moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

#tfnewsearch input::-webkit-input-placeholder {
    color: #999;
    font-size: 17px;
    padding-bottom:3px;
    height: 19px;
}

#tfnewsearch input:-moz-placeholder {
    color: #999;
    font-size: 17px;
    padding-bottom:3px;
}

#tfnewsearch input:-ms-input-placeholder {
    color: #999;
    font-size: 17px;
    padding-bottom:3px;
}

.t_button {
    outline: none; cursor: pointer;margin-bottom: -5px; margin-left: 22px;margin-right: 1px; border: solid 1px #000000; border-top:0px; border-left: 1px; border-right: 1px;
}

<form id="tfnewsearch" method="get" action="index.php">
    <input type="text" class="search_input" name="q" size="17" maxlength="120" placeholder="Search" required><img src="imgs/icon_search.gif" value="search" class="t_button">
</form>

Upvotes: 0

Views: 1024

Answers (1)

radha
radha

Reputation: 782

try to use padding to .search_input

 .search_input{
    font-family: Helvetica;
    font-size:14px;
    border:1px solid #000000;
    border-top:1px;
    border-right: -0px;
    border-left: 0px;
    margin-left: 3px;
    margin-right: -23px;
    margin-top: 6px;
    width: 150px;
    box-sizing: border-box;
    padding-bottom:5px;
}

http://jsfiddle.net/yZXSJ/

Upvotes: 2

Related Questions