消す - プレースホルダー css




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

os x上のChromeを最新の安定版(9.0.597.94)に更新した瞬間に問題が発生したことに気付きました。これはChromeのバグであり、うまくいけば修正されるはずです。

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

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

とにかく、ここにはCSSのコードがあります。 ( EDIT :これは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 )のみを変更できるようですが、入力を含む入力のパディングを編集しようとすると、入力のデザインがwebkitます! 髪を引き出す

プレースホルダのスクリーンとテキスト入力の入力フィールドは次のとおりです。

編集

今のところ私はこのjqueryプラグインに頼っています

それは箱からすぐに動作し、それは私のクロムの問題を修正します。 私はまだ問題が何かを明らかにする(もしそれが私のクロムか何かと関係があるなら)

私はそれがスタイルではないと確信しています。なぜなら、John Catterfeldはそれを問題なく再現しているからです。誰かがそこから出て、私に正しい方向に向かうことができると思っています。 JohnがWindowsを使用している場合は、おそらくChrome / OSXのネイティブです)


line-height: 0px;設定するline-height: 0px; Chromeでそれを修正しました


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

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

その間、 このページの表には、さまざまなスタイルに対するブラウザのサポートが異なります。

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


私には問題がありました。これはインターネットエクスプローラにのみ現れます。 入力フィールドのスタイル

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

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

私の解決策は以下の通りです。

line-height:normal;

私はあなたのスクリーンショットをバックグラウンドイメージとして使用して余分なマークアップを取り除き、フィディ

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

これはあなたのために働きますか? そうでない場合は、正確なマークアップとCSSでフィディルドを更新できますか?


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

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;
}




css3