web-dev-qa-db-ja.com

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

私はこれをすでに見ました 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）のみを変更できるようですが、含まれている入力のパディングを編集しようとすると、入力のデザインが壊れます！ 髪を引き抜く

以下に、プレースホルダーとテキスト入力のある入力フィールドのスクリーンを示します。

placeholdertext input

編集：

今のところ、私はこれに頼っています jquery plugin 。

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

ジョン・キャッターフェルドが問題なくそれを再現したので、スタイルではないと確信していますので、誰かがまだ私にこれが起こっている理由について正しい方向を教えてくれることを願っています（私のクライアントのchromeも同様です。したがって、JohnがWindowsを使用している場合、これはおそらくChrome/OSXにネイティブです）

csshtml5google-chromewebkitcss3
126
corroded

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

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

222
Johansrk

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

input{
  text-indent: 10px;
}
68
talsibony

行の高さを保持し、プレースホルダーを強制的に同じにする場合は、新しいブラウザーバージョン以降のプレースホルダー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;
}
28
floribon
line-height: normal;

私のために働いた;）

24
user2264934

問題が発生しました。InternetExplorerに表示されます。入力フィールドのスタイルが整えられました

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

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

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

line-height:normal;
3
Babs

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

2
JobJob

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

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

それまでの間、 このページの表 に解決できます。これは、さまざまなスタイルのさまざまなブラウザーサポートを示しています。

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

2
zykadelic

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

私はこの問題を回避しようとせず、ただ修正を待つだけです。それはそれを取り出すより多くの仕事を意味するでしょう。

1
will

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

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

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

1
ajcw

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

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

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

1
Hiren Dihora

John Catterfeldのブログ で、これに関する不満を解消する答えを見つけました。

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

行の高さまたはパディングを使用している場合、結果のプレースホルダーにイライラするでしょう。私はこれまでのところ、それを回避する方法を見つけていません。

1
rb-

プレースホルダーはline-heightの影響を受けず、paddingはブラウザー上で一貫性がありません。

しかし、別の解決策を見つけました。

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

1
Robin Knight

このページのここにあるほとんどすべてのメソッドをテストしました。 angularマテリアルアプリで&nbsp;を介して解決策を見つけたのは、つまり.

角材

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

非Angularマテリアル

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

<input type="text" class="pl-3" placeholder="Email">
0
WasiF