Qual tag CSS cria uma caixa como esta com o título?

StackOverflow https://stackoverflow.com/questions/113640

  •  02-07-2019
  •  | 
  •  

Pergunta

Eu quero criar uma caixa como esta com o título:

caixa de CSS com o título

Pode alguém por favor me avise se há uma tag CSS padrão para fazer isso? Ou eu preciso para criar o meu estilo personalizado?

Foi útil?

Solução

Eu acredito que você está procurando a tag fieldset HTML, que você pode então estilo com CSS. Por exemplo., 

<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>

Outras dicas

Se você não estiver usando-o em formas, e em vez disso quiser usá-lo de forma não-editável, você pode fazer isso através do seguinte código - 

<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>

E no arquivo CSS 

.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 {
}

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

<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>


<style type="text/css">
fieldset { border:1px solid green }

legend {
  padding: 0.2em 0.5em;
  border:1px solid green;
  color:green;
  font-size:90%;
  text-align:right;
  }
</style>

Isto lhe dará o que você quer 

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

Tanto quanto eu sei (me corrija se eu estiver! Errado), não existe.

Eu recomendo que você use um div com um interior negativo-margin-h1. Dependendo da estrutura semântica do documento, você também pode usar um conjunto de campos (HTML) com uma lenda (HTML) no interior do qual aproximadamente parece com isso por padrão.

Eu acho que este exemplo também pode ser útil para alguém: 

.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>

Você pode tentar fazer isso. 

<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>

DEMONSTRA

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top