Question

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.

Answer 1

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 */
}