4

Mac の Webkit のみで、検索入力のテキストは左側からインデントされます。ここにデモがあります。すべてのパディング、テキストインデントを削除し、またはに設定-webkit-appearanceした後でも、テキストはまだインデントされています。約 10px 程度に見えますが、インスペクターには、このスタイルを適用していると思われる CSS ルール (ブラウザーのデフォルトでさえも) は表示されません。何か案は？textfieldnone

<input type="search" value="Search">

-webkit-appearance: textfield;
border: 1px solid #ccc;
padding: 0;
margin: 0;
text-indent: 0;
4

2 に答える 2

18

これは、WebKit でデフォルトのスタイリングを実際にリセットする方法です。

input[type="search"] {
    -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

その後、パディングの問題はなくなるはずです。WebKit 以外のブラウザーには存在しないキャンセル ボタンも正規化したい場合はinput[type="search"]::-webkit-search-cancel-button、2 番目のルールのセレクターとして追加します。

于 2012-06-20T21:12:12.977 に答える
2

デフォルトでは、input[type="search"] にボーダー ボックス モデルを使用する WebKit ベースのブラウザー。また、従来のボックス サイズ設定を使用している場合 (他のモデルを宣言していない場合)、奇妙なパディングとボーダーの動作が発生する可能性があります。修理：

input[type="search"] {
box-sizing: content-box;
}

-については、( ) と を-webkit-appearance試してください。いずれにせよ、iOS デバイスでページをテストして、入力フィールドがフォーカスされた後にスタイルが変わらないことを確認してください (奇妙な動作、バグの可能性があります - ストック iOS 6.0 で iPhone 4S を使用しています)textareatextfieldnone

于 2013-01-27T16:07:50.520 に答える