html - chrome中的输入字段宽度和填充

Question

我遇到了一个问题，我的输入元素的宽度因浏览器而异。Chrome 给出了一个不正确的宽度，其中应该是宽度+填充它现在是宽度，总填充是最小宽度。

HTML

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

CSS

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

我在这里放了一个例子来测试它。

Answer 1

此处解释的输入类型搜索存在限制，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 */
}

Answer 2

添加类型="搜索"

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

演示http://jsfiddle.net/Sqyn7/1/