HTML5プレースホルダーのCSSパディング

私はすでにこの投稿を見て、プレースホルダーのパディングを変更するためにできることはすべて試しましたが、残念ながら、協力したくないようです。

とにかく、CSSのコードは次のとおりです。（編集：これはsassから生成されたcssです）

#search {
  margin-top: 1px;
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 220px;
}

#search form {
  position: relative;
}

#search input {
  padding: 0 10px 0 29px;
  color: #555555;
  border: none;
  background: url('/images/bg_searchbar.png?1296191141') no-repeat;
  width: 180px;
  height: 29px;
  overflow: hidden;
}

#search input:hover {
  color: #00ccff;
  background-position: 0px -32px;
}

そして、これが単純なhtmlです。

<div id="search">
  <form>
    <input type="text" value="" placeholder="Search..." name="q" autocomplete="off" class="">
  </form>
  <div id="jquery-live-search" style="display: block; position: absolute; top: 15px; width: 219px;">
    <ul id="search-results" class="dropdown">
    </ul>
  </div>
</div>

ものすごく単純？何らかの理由でプレースホルダーがオフになっていますが、入力フィールドに入力しようとすると、テキストが整列されます。webkitプレースホルダーの色（の）しか変更できないようですが、含まれている入力のパディングを編集しようとすると、入力のデザインが崩れます。髪を抜く

以下は、プレースホルダーとテキスト入力の入力フィールドの画面です。

編集：

今のところ、私はこのjqueryプラグインに頼りました。

それは箱から出してすぐに動作し、私のクロムの問題を修正します。私はまだ問題が何であるかを明らかにしたいと思います（それがMYクロームまたは何かと関係がある場合）

John Catterfeldが問題なくそれを再現したので、スタイルではないと確信しています。そのため、誰かが私にこれが起こっている理由（クライアントのクロムも同様）を正しい方向に向かわせてくれることを願っています。 JohnがWindowsを使用している場合、これはおそらくChrome / OSXのネイティブです。

同じ問題が発生しました。

入力から行の高さを削除して修正しました。問題の原因となっている線の高さがあるかどうかを確認します

同様の問題がありました。私の問題はサイドパディングであり、解決策はテキストインデントでした。テキストインデントがプレースホルダーのサイドの位置に影響することを理解していませんでした。

input{
  text-indent: 10px;
}

行の高さを維持し、プレースホルダーを同じにしたい場合は、新しいブラウザーバージョン以降、プレースホルダーCSSを直接​​編集できます。それは私のためのトリックをしました：

input::-webkit-input-placeholder { /* WebKit browsers */
  line-height: 1.5em;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  line-height: 1.5em;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
  line-height: 1.5em;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
  line-height: 1.5em;
}

line-height: normal; 

私のために働いた;）

実際に行の高さを削除すると、テキストがプレースホルダーテキストに揃えられますが、デザインをこの欠陥に適合させる必要があるため、問題は適切に解決されません（バグではありません）。vertical-alignを追加しても、取引は成立しません。私はすべてのブラウザで試したことはありませんが、Safari 5.1.4では確実に動作しません。

これに対するjQueryの修正を聞いたことがあります。これはクロスブラウザープレースホルダーサポート（jQuery.placeholder）ではありませんが、プレースホルダーのスタイリング用ですが、まだ見つかりません。

当面は、このページの表を参照して、さまざまなスタイルに対するさまざまなブラウザのサポートを確認してください。

編集：プラグインが見つかりました！jquery.placeholder.min.jsは、完全なスタイリング機能とバーゲンへのクロスブラウザーサポートの両方を提供します。

Internet Explorerだけに表示される問題がありました。入力フィールドがスタイル設定されました

height:38px;
line-height:38px;

IEでは残念ながら、最初のプレースホルダーは正しい位置に表示されません。しかし、フィールドをクリックしてこのフィールドを離れると、プレースホルダーが正しい位置に表示されました。

私の解決策は設定することでした：

line-height:normal;

設定line-height: 0px;は私のためにそれをChromeで修正しました

私はあなたのスクリーンショットを背景画像として使用し、余分なマークアップを取り除くフィドルを作成しました、そしてそれはうまくいくようです

http://jsfiddle.net/fLdQG/2/ブラウザが必要）

これはうまくいきますか？そうでない場合、フィドルを正確なマークアップとCSSで更新できますか？

os xでChromeを最新の安定版リリース（9.0.597.94）に更新した瞬間に問題に気付いたので、これはChromeのバグであり、うまくいけば修正されるでしょう。

私はこれを回避しようとさえせず、修正を待つだけになりたくなります。それはそれを取り除くより多くの仕事を意味するだけです。

プレースホルダーは影響を受けずline-height、paddingブラウザ上の矛盾です。

私は別の解決策を見つけました。

VERTICAL-ALIGN。これが機能するのはおそらくこれが唯一の時間ですが、代わりにそれを試して、CSSコードの多くの行を掘り下げてください。

行の高さを削除するか、パディングを使用して設定します...すべてのブラウザで機能します

ジョン・カタッターフェルドのブログで、これに対する私の不満を解消した答えを見つけました。

... Chrome（v20-30）はほとんどすべてのスタイルを実装しますが、大きな注意点があります。プレースホルダースタイルは入力ボックスのサイズを変更しないので、行の高さや上部または下部のパディングなどには近づかないでください。

行の高さやパディングを使用している場合、結果のプレースホルダーに不満を感じることになります。今のところ、これを回避する方法は見つかっていません。

プレースホルダーテキストを右に移動し、カーソルを空白スペースに置いておく場合は、プレースホルダー属性の先頭にスペースを追加する必要があります。

<input type="email" placeholder="  Your email" />

このページで提供されているほぼすべてのメソッドをAngularアプリ用にテストしました。私だけが解決策を見つけました がスペースを挿入するすなわち

角材

<input matInput type="text" class="pl-2" placeholder="&nbsp;&nbsp;Email">

非角形材料

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container m-3 d-flex flex-column align-items-center justify-content-around" style="height:100px;">
<input type="text" class="pl-0" placeholder="Email with no Padding" style="width:240px;">
<input type="text" class="pl-3" placeholder="Email with 1 rem padding" style="width:240px;">
</div>