html - 入力フィールドの幅とクロームのパディング

Question

ブラウザによって入力要素の幅が異なるという問題があります。Chromeは誤った幅を提供しますが、withはwidth + paddingである必要があり、現在はwidthであり、パディング全体が最小幅です。

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="search" を追加

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

デモhttp://jsfiddle.net/Sqyn7/1/