7

これはやや面倒です。Webkit（chrome 13カナリア経由）はさまざまな入力タイプのスタイリングを正しく行っており、デザインと大きく衝突しているようです。

特に、これらは私に頭痛の種を引き起こしています：

  • 選択した要素のグロー（アウトライン経由）
  • placeholder=テキストスタイル
  • フォーカスされたテキストエリアと入力フィールドの周りの醜い輝き

ボイラープレートとmodernizrを使用しています。

プレースホルダーを使用した単純なinput[type=search]ものは、テキストのスタイルを上書きします。

私はあなたがそれを介してそれをターゲットにできることを知っています

input::-webkit-input-placeholder

ただし、これは次のようなスタイルを設定できないようですtext-shadow-これは少しがらくたです。これが修正されるバグである可能性が高いかどうか、またはjavascriptプレースホルダーソリューションにフォールバックする必要があるかどうかを誰かが知っていますか？

検索入力は白いbgで出力され、基本CSSクラスで定義された丸みを帯びた角を削除します。リセットコードを見つけました：

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none;
}

input[type=search] {
  /* the webkit overrides need to stay at the top */
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  /* your styles here */
}

そしてそれは一種の助けになります。

を設定して修正したフォーム要素の周りの輝きoutline: none。

私が本当に求めているのは、CSSリセットであり、user agent stylesheet（Webインスペクターによると）それに影響を与える事前定義されたスタイルをすべて削除します。DoctypeがHTML5であるにもかかわらず、要素がHTML5の前と同じように単純にレンダリングされ、ベースCSSで設定された暗黙のルールに従うようにすることができるリセットはありますか？

私はそれを言うのは嫌ですが、メモリを大量に消費する問題とプラグインの速度の遅さにもかかわらず、FireFox4は実際にはすべてを完璧にレンダリングします。Webkitはあなたに代わってスタイルを設定しようとしてはいけません。必要に応じて、スタイルを設定できるAPIを提供するだけです...

4

5 に答える 5

5

優れたフォーム リセット スタイルシート (わずかな JS を使用) はFormalizeです。

Formalize はすべてをリセットし、ブラウザー間で一貫したフォームを確保するために機能します。

于 2011-06-27T12:59:33.927 に答える
3

これには追加のスタイルを定義する必要があるかもしれませんが、私は通常-webkit-appearance:none、ほとんどのフォーム要素に配置します。

于 2012-10-19T19:40:22.860 に答える
0

CSS リセット スタイルは、頭を悩ませずにすむので、常に良いスタートです。

グローを削除したい場合は、あなたが言ったように、outline プロパティで少し遊ぶことができます。設定もtext-shadow:none役立つかもしれません。

とにかく、最初にリセットでスタイルをリセットしようとしないかどうかは推測にすぎません。すべてのブラウザーで Web ページを同じように表示するために特別に作成されているからです。

于 2011-06-23T14:47:30.917 に答える
0

Mark Pilgrim による"HTML5: Up and Running"からの引用:

「placeholder属性にはテキストのみを含めることができ、HTML マークアップは含めることができません。ただし、ベンダー固有の CSS 拡張機能がいくつかあります (http://trac.webkit.org/export/37527/trunk/LayoutTests/fast/forms/placeholder-pseudo-style .html) を使用して、一部のブラウザーでプレースホルダー テキストのスタイルを設定できます。

したがって、少なくとも質問のその側面については、スクリプト化されたソリューションに頼る必要があると思います。これまでのところ、IE のバージョンがプレースホルダー テキストをサポートしていないことを考えると特にそうです。

于 2011-06-22T18:50:10.903 に答える