Désolé si cette question a déjà été posée, mon ami m'a demandé de faire ce type de fieldset pour leur site web.Bordure personnalisée pour un jeu de champs et une légende
capture d'écran dans ce lien custom fieldset border
il ressemble à une normale mais je suis curieux de voir comment puis-je obtenir cette petite ligne verticale sur la gauche et le côté droit du texte « visent à préserver ».
L'aide serait grandement appréciée.
Cordialement,
Vous pouvez utiliser les :before et :after éléments pseudo pour le style de ces deux lignes verticales spécifiques:
fieldset {
border:1px solid gray;
}
legend {
padding: 0.2em 0.5em;
color: gray;
font-size:90%;
text-align:center;
position: relative;
}
legend:before {
position: absolute;
content: '';
height: 8px;
border-left: 1px solid gray;
left: 0px;
top: 7px;
}
legend:after {
position: absolute;
content: '';
height: 8px;
border-right: 1px solid gray;
right: 0px;
top: 7px;
}<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>Voici une certaine amélioration.
fieldset {
border:1px solid gray;
}
legend {
position: relative;
left: 50%;
/* Move the legend to the center of the fieldset's top border */
transform: translateX(-50%);
/* Fix the alignment to center perfectly */
background-color: white;
/* Put whatever color you want */
padding: 0.2em 0.5em;
color: gray;
font-size:90%;
text-align:center;
position: relative;
}
legend:before {
position: absolute;
content: '';
height: 8px;
border-left: 1px solid gray;
left: 0px;
top: 7px;
}
legend:after {
position: absolute;
content: '';
height: 8px;
border-right: 1px solid gray;
right: 0px;
top: 7px;
}
#line {
position: absolute;
top: 19px; /* Position the line */
left: 12px;
border-top: 1px solid gray;
min-width: 20%; /* Fix this according to the white space to hide */
}<form>
<fieldset>
<!-- Add a div here to make up a line to hide
the space left by the legend -->
<div id="line"></div>
<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>Hope it helps ...
Avez-vous vérifié les réponses? – Dekel