Utilizando la propiedad display, los elementos HTML se vuelven intercambiables desde una perspectiva de estilo. Sin embargo, este no parece ser el caso para fieldset y legend.¿Se puede diseñar cualquier elemento HTML como fieldset/legend?
¿Es posible diseñar otros elementos HTML para que se parezcan a fieldset y legend?
La respuesta anterior es incorrecta, si quieres ver por qué intentar esto:
<body style="background-color: #f00">
<div style="border: 1px solid #000">
<h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
</div>
<fieldset><legend>Foobar</legend></fieldset>
</body>
yo sepa no hay ninguna manera de tener ese efecto-interrupción frontera que el elemento legend causa en el borde fieldset. No creo que sea posible solo con CSS, es solo algo que forma parte de la forma en que se procesa la etiqueta fieldset.
Aclaración: No sé de cualquier forma de posicionar un elemento de bloque o en línea tal que extiende a ambos lados de la frontera visible de su elemento de bloque que contiene, y luego causas del borde del elemento contenedor para ser roto por detrás de su caja. Eso es lo que hace un <legend> al borde de su elemento que contiene <fieldset>.
Seguro, por ejemplo: un elemento DIV con un borde y un elemento de encabezado secundario con el conjunto de colores de fondo colocado para superponer el borde del DIV se vería como un conjunto de campo y una leyenda.
ejemplo muy básico:
<div style="border: 1px solid #000">
<h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
</div>
Esto solo puede verse correctamente si el fondo es un color plano, no una imagen. –
cierto. A menos que también sea posible aplicar la imagen de fondo al elemento de encabezado secundario y hacerla coincidir con el fondo. Sin embargo, esto requeriría que los elementos estuvieran en una posición fija para funcionar. –
Esto funciona bastante bien, pero ie6 actuará un poco extraño si el fondo es una imagen, nada que un comentario condicional no pueda solucionar. Probado en IE6-8, FF3.6, Safari 5, Chrome 5
.fieldset {
position: relative;
border: 1px solid #000;
margin: 20px;
padding: 20px;
text-align: left;
}
.fieldset .legend {
background: #fff;
height: 1px;
position: absolute;
top: -1px;
padding: 0 20px;
color: #000;
overflow: visible;
}
.fieldset .legend span {
top: -0.5em;
position: relative;
vertical-align: middle;
display: inline-block;
overflow: visible;
}
<div class="fieldset">
<div class="legend">
<span>This is the title</span>
</div>
Test
</div>
Así que fija el código para que se vea un poco (Realmente se parece a la etiqueta de leyenda) como la etiqueta de leyenda.
<div style="border: 2px groove #ccc">
<h1 style="font-weight:normal; background: #fff; margin-top: -11px; margin-left: 10px; padding: 0 10px 0 0; width: 40px; height:20px; font-size:1em;">Foobar</h1>
</div>
<fieldset><legend>Foobar</legend></fieldset>
Mi respuesta no es incorrecta, solo requiere ciertas condiciones para funcionar. Descubrirá que este suele ser el caso con este tipo de "trucos"; casi nunca hay una solución única para todos. –
Bueno, su pregunta era "¿cómo puedo peinar un elemento como un par de campo/leyenda?" Cuando miras el documento que proporcioné, ¿ves dos bloques idénticos? –
Lo que realmente quería saber es si hay una manera (usando el estándar CSS) de obtener el efecto exacto que crea un 'fieldset' /' legend', o si el efecto está codificado de forma fija solo para 'fieldset' /' legend '. Como parece estar codificado, acepto esta respuesta. – Jakob