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

Question

私はこのpostを既に見てきましたが、私のプレースホルダのパディングを変更するためにすべてを試しましたが、それはちょうど協力したくないようです。

とにかく、ここにはCSSのコードがあります。 （EDIT：これはサスから生成された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 pluginに頼ってきた今の

：

EDIT：は

はここでプレースホルダのscreeniesとテキスト入力と入力フィールドです髪を引っ張ります。

これはすぐに使用でき、私のクロムの問題を解決します。私はまだ問題が何かを明らかにする（もしそれが私のクロムか何かと関係があるなら）

私はそれがスタイルではないと確信しているので、John Catterfeldはそれを問題なく再現したので、私のクライアントのクロムも同様です（つまり、これはおそらくChromeがChrome OS/OSXのネイティブである場合）

Answer 1

私は同じ問題を抱えています。

入力からラインハイトを削除して修正しました。問題の原因となっている線幅があるかどうかを確認してください。

Answer 2

私はこれを作成しました。あなたのスクリーンショットを背景イメージとして使用し、余分なマークアップを取り除くと、うまく動作するようです。

（ウェブキットブラウザが必要です）

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

Answer 3

os xのChromeを最新の安定版（9.0.597.94）にアップデートした瞬間に気づきました。これはChromeのバグであり、うまくいけばうまくいきます。

私はこのことを回避して修正を待つことさえしたくないと誘惑されます。それはただそれを取り出すより多くの仕事を意味するだけです。

Answer 4

プレースホルダは、line-heightの影響を受けず、paddingはブラウザで一貫していません。

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

VERTICAL-ALIGN。これは恐らく動作する唯一の時間ですが、代わりにそれを試して、CSSコードの多くの行を洞窟に入れてください。

Answer 5

実際に行の高さを削除すると、テキストがプレースホルダテキストと揃うようになりますが、デザインをこの欠陥に適応させる必要があるため、問題は適切に解決されません（バグではありません）。垂直方向のアライメントを追加しても取引は行われません。私はすべてのブラウザで試したわけではありませんが、Safari 5.1.4では動作しません。

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

これまでのところ、さまざまなスタイルのブラウザサポートが異なるthe table on this pageに解決できます。

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

Answer 6

ラインハイトを維持してプレースホルダを同じにする場合は、新しいブラウザのバージョン以降にプレースホルダ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; 
} 

Answer 7

line-height: normal; 

が私のために働いた;）

Answer 8

私はInternet Explorerで表示される問題を、持っていました。入力フィールドのスタイルが変更されました

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

残念ながら、最初のプレースホルダは正しい位置に表示されません。しかし、フィールドをクリックしてからこのフィールドを離れると、プレースホルダが正しい位置に表示されました。それはline-height: 0px;はクローム

Answer 9

削除行の高さやパディングを使用して設定を：

私のソリューションは、設定しました同様の問題があった、私の問題はサイドパディングで、ソリューションは、テキストインデント、私はテキストインデントがプレースホルダ側の位置に影響を与えることを認識していませんでした。

input{ 
    text-indent: 10px; 
} 

Answer 10

を働いている...

line-height:normal; 

Answer 11

私は私のためにそれを固定設定し、すべてのブラウザで

Answer 12

John Catterfeld's blogについての私の不満を救済した回答が見つかりました。

...クロム（v20-30）は、ほぼすべてのスタイルを実装していないが、主要な注意点が - プレースホルダのスタイルには、入力ボックスのサイズを変更するので、行の高さとパディング上部または下部のようなものを明確に滞在します。

ラインハイトまたはパディングを使用している場合は、結果のプレースホルダに不満を感じます。私はこの時点までこれを回避する方法を見つけていない。