Webフォームに3つのドロップダウンリストが3つあります。CSSを使用してWebフォーム上の特定のコントロールの周りにグループボックスを作成します。
これらのコントロールの周りにグラフィックの「ボックス」を作成したいと思います。その理由は、これらのコントロールを選択することは自分のプロセスの「ステップ1」になるからです。だから私はこれらのコントロールの周りにボックスを入れて "ステップ1"と呼んでほしい
どうすればこのことをCSSでやっていくのですか?
例:legend
と
Webフォームに3つのドロップダウンリストが3つあります。CSSを使用してWebフォーム上の特定のコントロールの周りにグループボックスを作成します。
これらのコントロールの周りにグラフィックの「ボックス」を作成したいと思います。その理由は、これらのコントロールを選択することは自分のプロセスの「ステップ1」になるからです。だから私はこれらのコントロールの周りにボックスを入れて "ステップ1"と呼んでほしい
どうすればこのことをCSSでやっていくのですか?
例:legend
と
fieldset
フォームコントロールの視覚的および意味論的グループ化を提供します。 CSSを使用してこれをスタイル設定することができます。 fieldset
は、legend
がその親の境界を視覚的に中断することができるという点で幾分ユニークです(他の要素では可能ですが難しい)。
例:http://www.w3.org/wiki/HTML/Elements/fieldset:http://jsfiddle.net/NUMcr/1/
<fieldset>
<legend>Group 1</legend>
<input type="text" />
<asp:Textbox runat="Server" id="txt1" />
<!-- etc -->
</fieldset>
fieldset {
margin: 8px;
border: 1px solid silver;
padding: 8px;
border-radius: 4px;
}
legend {
padding: 2px;
}
この特定の目的のために作られfieldset
HTML要素は、あります。あなただけCSSを使用して設定されている場合、あなたはこのような何かを行うことができます:
<html>
<head></head>
<body>
<h1>Step 1</h1>
<div style="border: 1px solid #000000;">
<input type="text" />
<input type="submit" value="Submit" />
</div>
</body>
</html>
はその後、h1
(または任意のHTML要素のタイプあなたは、ヘッダーのために使用したい)とdiv
を含むのスタイルができ入力要素。
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
あなたの答えに少し説明を加えてください – HaveNoDisplayName
hmmmmmmmフィールドセットタグを追加しましたが、コントロールがボックスに表示されません。これらのコントロールにはcssクラスが付属しており、位置決めはすべてそれらに設定されています。これは問題かもしれませんか? – Testifier
かもしれません。 Fieldsetは単なるコンテナなので、修正可能な問題でなければなりません。フィールドセットに 'position:relative'を設定してみてください。あるいは、コントロール上のCSSを一時的に取り除いてみてください。 –
がprobであった。どうも! – Testifier