Создание группового поля вокруг определенных элементов управления в веб-форме с помощью CSS

У меня есть три элемента управления на моей веб-форме из трех выпадающих списков.

Я хочу создать графическую "коробку" вокруг этих элементов управления. Причина этого заключается в том, что выбор этих элементов будет "Шаг 1" мой процесс. Поэтому я хочу поставить коробку вокруг этих элементов управления и назвать ее "Шаг 1"

Как бы я сделал это с помощью CSS?

пример:

3 54
html css

3 ответа:

A fieldset С legend обеспечивает визуальную и семантическую группировку для элементов управления формы. Затем вы можете стилизовать это по желанию с помощью CSS. А fieldset несколько уникален в том, что legend способен визуально прерывать границу своего родителя 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;    
}
74

есть 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 содержащий входные элементы.

12
<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>
3