CODEWITHSUNDEEP
htmlcssgoogle-chrome
Ruudt
Ruudt

Reputation: 262

Input field width and padding in chrome

I'm having an issue where the width of my input element differs depending on the browser. Chrome gives an incorrect width where the with should be width+padding it is now width and the total padding is the minimum width.

HTML

<input type="search" name="keywords" id="ctrl_keywords_2" class="text" value="">​

CSS

input {
width: 76px;
padding-right: 52px;
padding-left: 24px;
}​

I've placed an example here to test it.

Upvotes: 1

Views: 1977

Answers (2)

JConstantine
JConstantine

Reputation: 3931

There are limitations to the input type search as explained here, http://css-tricks.com/webkit-html5-search-inputs/

input[type=search] {    
    padding: 30px;            /* Overridden by padding: 1px; */
    font-family: Georgia;     /* Overridden by font: -webkit-small-control; */
    border: 5px solid black;  /* Overridden by border: 2px inset; */
    background: red;          /* Overridden by background-color: white; */
    line-height: 3;           /* Irrelevant, I guess */
}

Upvotes: 3

Sowmya
Sowmya

Reputation: 26969

Add type="search"

input [type="search"]{
width: 75px;
padding-right: 52px;
padding-left: 24px; 
}​

Demo http://jsfiddle.net/Sqyn7/1/

Upvotes: 1

Related Questions