0

作成しているフォームに2つの問題があります。最初の問題は、いくつかのcssをフォームにスローしたいことです。<textarea>終了タグがあり、間にテキストを入れることができるので、これは私のボックスで機能します。一方、タグ<input>はタグを介してテキストを取得する必要がありますがvalue=""、これは私のCSS試行のいずれにも応答しません。

第二に、クリックするとボックスがクリアになるのではないかと思いました。（HTMLフォームがそれをサポートしているかどうかはわかりません）

これがcssを含むフォームへのリンクであるため、問題を確認できます。http://jsfiddle.net/D39rr/5/

4

2 に答える 2

1

探しているのはplaceholder属性です。例とスタイリング情報の両方については、CSS を使用した HTML5 プレースホルダー スタイリングに関する David Walsh の記事を参照してください。このplaceholder属性は、IE を除いて、かなり適切にサポートされています。placeholderただし、Javascript を使用して属性の効果を再作成することはできます... Webshims libを使用して、HTML5 フォーム機能 ( や などの他の属性を含む) を段階的にポリフィルするのが好きtype="date"ですrequired="required"。

于 2012-08-25T22:06:16.067 に答える
1

placeholder次の属性を探しています。

<input placeholder="Your email address" />

JS フィドルのデモ。

テキストのスタイルを設定するにはplaceholder(対応ブラウザで):

::-webkit-input-placeholder,
::-moz-input-placeholder,
::-o-input-placeholder,
::-ms-input-placeholder,
::input-placeholder {
    color: #0f0;
    font-weight: bold;
}

JS フィドルのデモ。

テキストのスタイルを設定するには、それがvalue属性によるものか、ユーザーが入力したものかを問わず、通常colorの , font-style,font-weightなどを使用するだけです:

input {
    color: #f00;
    font-size: 1.5em;
    font-style: italic;
    font-weight: bold;
}​

JS フィドルのデモ。

ちなみに、textareaあなたが正しく指摘しているように、 には「終了タグがあります」。したがって、それは自己終了 (または void) 要素ではなく、開始タグに文字を含めるべきではありません(/リンクされた JS Fiddle:<textarea id="style" name="message" />Type out your question here</textarea>で行うように)。代わりに、次のようにする必要があります。

<textarea id="style" name="message">Type out your question here</textarea>

または、次の場合placeholder:

<textarea id="style" name="message" placeholder="Type out your question here"></textarea>

また、 を使用しplaceholderて a を置き換えることlabelは、ユーザーがフィールドにフォーカスするか、フィールドにデータを入力すると、提供されるガイダンスが明示的に非表示になることを意味することにも注意してください。label要素を常に表示したくない場合は、inputがフォーカスされている間だけガイダンスを表示する 1 つの方法は次のとおりです。

label {
    display: inline;
    opacity: 0;
    overflow: hidden;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    -ms-transition: all 1s linear;
    transition: all 1s linear;
}

input:focus + label,
input:active + label {
    opacity: 1;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    -ms-transition: all 1s linear;
    transition: all 1s linear;
}​

JS Fiddle demoinputがフォーカス/アクティブになると、公開がトリガーされます。

于 2012-08-25T22:04:48.300 に答える