Override Bootstrap 5 fieldset style
Question
Back in previous versions of Bootstrap (and also with vanilla CSS), the following HTML:
<fieldset>
<legend>Test</legend>
Welcome!
</fieldset>
Outputs a fieldset with a border, where the legend goes over it:
Nevertheless, when the same HTML is used alongside Bootstrap 5, the output looks like this:
How can I override bootstrap CSS, so the fieldset has its border visible again with its legend over it?
3 answers
solution1
1 2021-12-30 21:19:34
Any css can be reset to its default by using revert:
fieldset, legend {
all: revert;
}
.reset { all: revert; }
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <fieldset> <legend>Legend</legend> </fieldset> <fieldset class="reset"> <legend class="reset">Reset legend</legend> </fieldset>
solution2
0 2021-12-30 21:23:54
A solution might be overriding legend and fieldset in CSS like this:
fieldset {
border: solid 1px gray;
padding-top: 5px;
padding-right: 12px;
padding-bottom: 10px;
padding-left: 12px;
}
legend {
float: none;
width: inherit;
}
However I don't think this approach is the cleanest for this approach, is there any recommended way to achieve this?
solution3
0 2022-12-29 17:46:52
Had the same issue and the following approach helped in my case. Refer to the following for further details.
https://github.com/twbs/bootstrap/issues/32548
<:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body> <div class="container"> <fieldset class="border rounded-3 p-3"> <legend class="float-none w-auto px-3" >Test</legend> Welcome! </fieldset> </div> </body> </html>
solution4
-1 2021-12-30 21:15:09
Some ;important; to the bootstrap CSS might help.
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.