I've tried making a fieldset with the react app but it seemed difficult so i managed to make it look like with some css, and now i'm pretty curious about how to border the comlpete box just like this
<div class="fieldset">
<div class="legend">Text</div>
Text2
</div>
Customised Styles:
.fieldset{
width: 200px;
height: 300px;
border: 1px solid black;
padding: 30px;
margin: 30px;
position: relative;
}
.legend{
font-size: 45px;
position: absolute;
top: -8%;
left: 50%;
transform: translate(-50%);
background: #fff;
}
this way you can goes near your goal. Hope it's work for you.
.fieldset{ border: 1px solid black; padding: 30px; margin: 100px 30px 30px; position: relative; font-size: 45px; width: 200px; border-radius: 10px; }.legend{ position: absolute; width: fit-content; top: -74px; left: 0; right: 0; margin: 0 auto; padding: 10px; border: 1px solid #000; border-bottom: 1px solid #fff; border-radius: 10px 10px 0 0; }
<div class="fieldset"> <div class="legend">Title</div> Content </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.