Tengo tres controles en mi formulario web de tres listas desplegables.Crear un cuadro de grupo alrededor de ciertos controles en un formulario web usando CSS
Quiero crear una "caja" gráfica alrededor de estos controles. La razón para esto es que la selección de estos controles sería "PASO 1" de mi proceso. Así que quiero poner un recuadro alrededor de estos controles y llamarlo "Paso 1"
¿Cómo podría hacer esto con CSS?
Ejemplo:
A fieldset con un legend proporciona una agrupación visual y semántica para controles de formulario. A continuación, puede diseñar esto como desee con CSS. Un fieldset es algo único ya que el legend es capaz de interrumpir visualmente el borde de su elemento primario fieldset (posible con otros elementos, pero difícil).
Ejemplo: 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;
}
No es el elemento fieldset HTML, que está hecho para este propósito específico: http://www.w3.org/wiki/HTML/Elements/fieldset. Si se fijan en usar solamente CSS, se podría hacer algo como esto:
<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>
entonces se podría aplicar estilo al h1 (o cualquier tipo de elemento HTML desea utilizar para la cabecera) y la que contiene div los elementos de entrada.
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
agrega una pequeña explicación a tu respuesta – HaveNoDisplayName
hmmmmmmm, agregué la etiqueta fieldset pero los controles no se muestran en la caja. estos controles tienen una clase css adjunta y el posicionamiento está configurado para ellos. ¿Podría ser esto un problema? – Testifier
Podría ser. Fieldset es solo un contenedor, por lo que debería ser un problema reparable. Pruebe a establecer 'position: relative' en el fieldset, y/o intente eliminar el CSS en los controles temporalmente y vea si aparecen. –
ese fue el problema. ¡Gracias! – Testifier