75

3 つのドロップダウン リストの Web フォームに 3 つのコントロールがあります。

これらのコントロールの周りにグラフィカルな「ボックス」を作成したいと考えています。この理由は、これらのコントロールを選択することが私のプロセスの「STEP 1」になるからです。これらのコントロールをボックスで囲み、「ステップ 1」と呼びたいと思います。

CSSでこれを行うにはどうすればよいですか？

例：

フォーム要素を囲むボックス

4

3 に答える 3

98

fieldsetとは、フォーム コントロールのlegend視覚的および意味的なグループ化を提供します。その後、CSS で必要に応じてスタイルを設定できます。Aは、親の境界線を視覚的に遮ることができるfieldsetという点でややユニークです(他の要素では可能ですが、困難です)。legendfieldset

例: 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;    
}
于 2012-09-24T19:59:05.417 に答える
14

fieldsetこの特定の目的のために作成された HTML 要素があります: http://www.w3.org/wiki/HTML/Elements/fieldset。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入力要素を含む をスタイルできます。

于 2012-09-24T20:01:43.223 に答える
4 
<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>
于 2015-09-18T06:36:31.163 に答える