1

テキストを背景として設定する方法<input type="text">
それはプレースホルダーであってはなりません。しかし、常に表示されます。
例えば：

| 'from：'ユーザーはここに日付を入力します|

4

3 に答える 3

4

プレースホルダーテキストを意味する場合は、試してください<input type="text" placeholder="Hint Text!">

ただし、永続的なテキストが必要な場合は、これを試してください: http://jsfiddle.net/j8SZZ/

編集：更新された質問に行くと、これはまさにあなたが探しているものです.

更新: 背景色に関するコメント/フィードバックについて - http://jsfiddle.net/Debloper/j8SZ/3/

于 2012-09-10T17:16:07.163 に答える
1

テキストとテキスト フィールドを常に div でラップし、全体をテキスト フィールドのようにスタイル設定することができます。

したがって、次の HTML を使用します。

<div>
    <label id="lead" for="from">From: </label>
    <input id="from" type="text" />
</div>

そして、このスタイリング：

div {
    background-color: white;
    border: 2px inset;
    cursor: auto;
    width: 250px;
}
label {
    color: gray;
}
input, input[type="text"], input:focus {
    border: none;
    outline: none;
}

このJSFiddle demoになります。(Chrome と FF でテスト済み)。

編集

OPはJQuery UI Date Pickerの使用を検討していることを示しているため、ラベルとテキストフィールドの両方が日付ピッカーをトリガーできるようにするには、ソリューションを少し調整する必要があります。これは非常に単純で、この質問で説明されています。

「ラッピング」 div: にクラス名を追加するには、HTML を変更する必要があります<div class="extended-textfield">。これは、日付ピッカー自体も<div>CSS スタイルに含まれており、一般的すぎると、あらゆる種類の厄介なスタイルの競合が発生するためです。

div の CSS セレクターは に変わりdiv.extended-textfieldます。

そして JavaScript:

$( "#from" ).datepicker();
$("#lead").click(function() {
    $("from").datepicker('show');
});
​

ワーキングデモはこちらです。

于 2012-09-10T17:47:17.667 に答える
0

あなたを満足させるかもしれないいくつかの例[1]。

  • 最初の例では、CSS コンテンツを使用します。つまり、テキストは CSS によって定義され、CSS 疑似要素を介して挿入されます。フォーム要素自体は疑似要素を生成しないため、ラッパーが必要であることに注意してください。
  • 2 番目の例では、実際のコンテンツ (ラベルのコンテンツ) を使用してテキストを提供しています。

トリックの本質は、入力に透明な背景と、位置が相対に設定された同様の寸法のラッパー内の絶対位置を与えることです。これにより、下にあるコンテンツのすぐ上に配置され、透けて見えるようになります。

[1] http://codepen.io/barneycarroll/pen/bizIm

于 2012-09-10T17:46:38.990 に答える