在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

添加type =“搜索”

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

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

Answer 3

确保您已包含您的doctype，因为这通常是跨浏览器问题的问题