¿Qué etiqueta CSS crea un cuadro como este con título?

4 minutos de lectura

avatar de usuario
Mozammel

Quiero crear un cuadro como este con el título:

Cuadro CSS con título

¿Puede alguien decirme si hay una etiqueta CSS predeterminada para hacer esto? ¿O necesito crear mi estilo personalizado?

avatar de usuario
Atenea

Creo que estás buscando el fieldset Etiqueta HTML, que luego puede diseñar con CSS. P.ej,

    
    <fieldset style="border: 1px black solid">

      <legend style="border: 1px black solid;margin-left: 1em; padding: 0.2em 0.8em ">title</legend>

      Text within the box <br />
      Etc
    </fieldset>

  • debe copiar este código html exacto en su respuesta (además de su código fuente html que ya está allí). Este código se interpretará y mostrará en esta publicación, y eso demostraría que funciona exactamente como se anuncia. Todavía no puedo editar tu publicación para hacer precisamente eso…

    – VoC

    22 de septiembre de 2008 a las 8:09

  • VonC, intenté hacer eso, pero eliminó todo mi HTML. Dejando solo mi texto.

    – Atenea

    22 de septiembre de 2008 a las 8:31

  • Solo permite HTML literal básico, por lo que es probable que la etiqueta de conjunto de campos no esté permitida o algo así

    – Garry Shutler

    22 de septiembre de 2008 a las 9:17

  • vale la pena señalar que los conjuntos de campos se deben usar solo para formularios.

    – Zumbido

    22 de septiembre de 2008 a las 12:19

  • @Buzz ¿Por qué? ¿Cuál es el inconveniente?

    – Flamm

    8 de junio de 2021 a las 14:01

avatar de usuario
Jagat

Si no lo está utilizando en formularios y, en cambio, desea usarlo en una forma no editable, puede hacerlo a través del siguiente código:

.title_box {
  border: #3c5a86 1px dotted;
}

.title_box #title {
  position: relative;
  top: -0.5em;
  margin-left: 1em;
  display: inline;
  background-color: white;
}

.title_box #content {}
<div class="title_box" id="bill_to">
  <div id="title">Bill To</div>
  <div id="content">
    Stuff goes here.<br> For example, a bill-to address
  </div>
</div>

avatar de usuario
alexwilson

de http://www.pixy.cz/blogg/clanky/css-fieldsetandlabels.html

fieldset {
  border: 1px solid green
}

legend {
  padding: 0.2em 0.5em;
  border: 1px solid green;
  color: green;
  font-size: 90%;
  text-align: right;
}
<form>
  <fieldset>
    <legend>Subscription info</legend>
    <label for="name">Username:</label>
    <input type="text" name="name" id="name" />
    <br />
    <label for="mail">E-mail:</label>
    <input type="text" name="mail" id="mail" />
    <br />
    <label for="address">Address:</label>
    <input type="text" name="address" id="address" size="40" />
  </fieldset>
</form>

Esto te dará lo que quieres

<head>
    <title></title>
    <style type="text/css">
        legend {border:solid 1px;}
    </style>
</head>
<body>
    <fieldset>
        <legend>Test</legend>
        <br /><br />
    </fieldset>
</body>

Que yo sepa (¡corríjanme si me equivoco!), no lo hay.

Te recomiendo que uses un div con un margen negativo-h1 dentro. Dependiendo de la estructura semántica de su documento, también puede usar un conjunto de campos (HTML) con una leyenda (HTML) dentro de la cual se ve aproximadamente así de forma predeterminada.

  • Gracias, si tienes razón! Estaba buscando la opción fieldset/leyenda. Gracias

    – Mozammel

    22 de septiembre de 2008 a las 7:44

avatar de usuario
Glotón

Creo que este ejemplo también puede ser útil para alguien:

.fldset-class {
    border: 1px solid #0099dd;
    margin: 3pt;
    border-top: 15px solid #0099dd
}

.legend-class {
    color: #0099dd;
}
<fieldset class="fldset-class">
    <legend class="legend-class">Your Personal Information</legend>

    <table>
        <tr>
            <td><label>Name</label></td>
            <td><input type="text" name="name"></td>
        </tr>
        <tr>
            <td><label>Address</label></td>
            <td><input type="text" name="Address"></td>
        </tr>
        <tr>
            <td><label>City</label></td>
            <td><input type="text" name="City"></td>
        </tr>
    </table>
</fieldset>

  • Gracias, si tienes razón! Estaba buscando la opción fieldset/leyenda. Gracias

    – Mozammel

    22 de septiembre de 2008 a las 7:44

avatar de usuario
Glotón

Puedes probar esto.

<fieldset class="fldset-class">
    <legend class="legend-class">Your Personal Information</legend>

    <table>
        <tr>
            <td><label>Name</label></td>
            <td><input type="text" name="name"></td>
        </tr>
        <tr>
            <td><label>Address</label></td>
            <td><input type="text" name="Address"></td>
        </tr>
        <tr>
            <td><label>City</label></td>
            <td><input type="text" name="City"></td>
        </tr>
    </table>
</fieldset>

MANIFESTACIÓN

¿Ha sido útil esta solución?