ラベル付きコントロールを使用した場合の位置ラベル

Question

いいえ、インラインで塗りつぶし可能なフォームを持つ塗りつぶし可能なフォームを作成しようとしています（Mad Libsスタイルと考える）。標識されたコントロールを使用して要素について

、次のコード所与：

<form><p>Lorem ipsum <label class="label__fill-in"><input type="text" class="fill-in" maxlength="30">(community)</label> and stuff</p></form>

はfor="id-name"を使用せずに、入力線の下ラベルテキスト「（コミュニティ）」の位置に可能（で言及MDNを「ラベル付きコントロール」として使用します）。セレクターは本当のラベルのテキストだけで、その中の入力はできません。

Answer 1

テキストを移動しようとすると、入力ブロック要素がテキストをその下に移動させるようになります。

あなたの構造に基づいて、私は、ラベルの外側にあるテキストを入力に合わせることを考えていると思います。ですから、それを行うには、ラベルdisplay: inline-blockを使って、あなたが望む高さになるようにしてください。次に、pのテキストを上部に揃えて、すべてのテキストが上に並ぶようにすることができます。

https://jsfiddle.net/foyxhz4y/

私はこのために使用されるCSSは次のとおりです。

label input { 
    display:block; 
} 
label { 
    display: inline-block; 
} 

p * { 
    vertical-align: top; 
} 

入力されないラベルの内容を選択するには、:notセレクタを使用することができます。したがって、使用できるテキストのスタイルを設定するには、次のように入力します。入力要素ではないラベルのすべての内容が選択されます。