How to Make a Fieldset Legend-Style "Background Line" on Heading Text

How can I make a fieldset legend-style background line on heading text?

See: http://jsfiddle.net/thirtydot/jm4VQ/

If the text needs to wrap, this won't work. In IE7, there will be no line.

HTML:

<h2><span>Centered Header Text</span></h2>

CSS:

h2 {
    text-align: center;
    display: table;
    width: 100%;
}
h2 > span, h2:before, h2:after {
    display: table-cell;
}
h2:before, h2:after {
    background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
    width: 50%;
    content: ' ';
}
h2 > span {
    white-space: nowrap;
    padding: 0 9px;
}

Give Title of a Fieldset a Background Color

html

   <fieldset>
    <legend >Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>

css

fieldset legend {background:red}

working sample http://codepen.io/yardenst/pen/taBqH

How to style blockquote + cite to look like form fieldset + legend?

I have to admit, I enjoyed this one. Used absolutely positioned :befores and :afters, didn't touch your HTML markup but, as expected, went wild on CSS. Cheers!

fieldset {  border: 4px solid black;  padding: 1rem 2rem;}legend {  font-style: italic;  padding: 0 1rem;}.quote {  border-bottom: 4px solid black;  padding: 2.6rem calc(2rem + 6px) 1rem;  position: relative;  overflow: hidden;  margin: 0;}.quote:before,.quote:after {  content: ' ';  position: absolute;  width: 4px;  height: 100%;  background-color: black;  bottom: 0;  top: 1rem;}.quote:after {  left: 0;}.quote:before {  right: 0;}.attribution {  position: absolute;  top: 0;  left: 0;  margin-left: 2.4rem;  margin-top: .35rem;  padding: 0 1rem;  background: transparent;}.attribution:before,.attribution:after {  position: absolute;  content: ' ';  bottom: calc(50% - 1px);  height: 4px;  background-color: black;  width: 100vw;}.attribution:before {  right: 100%;}.attribution:after {  left: 100%;}

<p>Desired Look:</p><fieldset>  <legend>Mr. Jefferson</legend>  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas rem, animi facere illum deserunt nam ipsa, et sapiente quisquam sed repudiandae aliquam delectus. Reiciendis repellat illo, et natus earum odit!</fieldset>
<p>What I currently have:</p><blockquote class="quote">  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas rem, animi facere illum deserunt nam ipsa, et sapiente quisquam sed repudiandae aliquam delectus. Reiciendis repellat illo, et natus earum odit!  <cite class="attribution">Mr. Jefferson</cite></blockquote>

Fieldset legend CSS rendering behavior has changed in recent months... what happened?

If you can see it correctly on Chrome 76, it's likely this change has been introduced by turning on LayoutNG in Chrome 77, which has been released in 2019 already, but some parts of it came out later. For example, I know I had some inconsistency with layouting in textareas and had to have a hack until about last year.

It would be ideal to test with Chrome 77 to see if it really is this thing or not.

Anyway, this looks like an interplay between the margin-right: -2px and width: 0em that it somehow calculates the layout as overflowing and add a new line.

By using BrowserStack I found it changed in Chrome 86 which happens to be a version in which Chrome implemented flex and grid for fieldsets. They may have needed subtle changes for this to happen as well.

Two legends in a fieldset

You can do that by adding an extra element and positioning it absolutly in the <fieldset> :

fieldset {  position: relative;}.legend2 {  position: absolute;  top: -0.2em;  right: 20px;  background: #fff;  line-height:1.2em;}

<fieldset>  <legend>    Some Text  </legend>  <div class="legend2">Some other Text</div></fieldset>

CSS3 for HTML5 Legend inside fieldset

fieldset {    font-family: sans-serif;    border: 5px solid #1F497D;    background: #ddd;    border-radius: 5px;    padding: 15px;}
fieldset legend {    background: #1F497D;    color: #fff;    padding: 5px 10px ;    font-size: 32px;    border-radius: 5px;    box-shadow: 0 0 0 5px #ddd;    margin-left: 20px;}

<section style="margin: 10px;"><fieldset style="min-height:100px;"><legend><b> My Statistics </b> </legend><label> <br/> </label><label> <br/> </label></fieldset>

Is it possible to achieve a fieldset -like effect without using the fieldset tag?

No, it isn't really possible. Even browser makers themselves are struggling with that.

Of course, I couldn't resist having a go at it anyway. And I spent so much time on that, that Anonymous came up with a "solution" rather similar to mine in the mean time (his test1). But mine doesn't need the fixed width "legend".

This code is evidently a bit of a hack, though, and I don't know how well it'll fare in complex sites. I also agree with Anonymous that using a fieldset for grouping isn't nearly as bad as using tables for layout. Fieldsets were designed for grouping elements, though in HTML they're really only supposed to be used for grouping form controls.

.fieldset {  border: 2px groove threedface;  border-top: none;  padding: 0.5em;  margin: 1em 2px;}
.fieldset>h1 {  font: 1em normal;  margin: -1em -0.5em 0;}
.fieldset>h1>span {  float: left;}
.fieldset>h1:before {  border-top: 2px groove threedface;  content: ' ';  float: left;  margin: 0.5em 2px 0 -1px;  width: 0.75em;}
.fieldset>h1:after {  border-top: 2px groove threedface;  content: ' ';  display: block;  height: 1.5em;  left: 2px;  margin: 0 1px 0 0;  overflow: hidden;  position: relative;  top: 0.5em;}

<fieldset>  <legend>Legend</legend> Fieldset</fieldset>
<div class="fieldset">  <h1><span>Legend</span></h1> Fieldset</div>

Use Fieldset Legend with bootstrap

That's because Bootstrap by default sets the width of the legend element to 100%. You can fix this by changing your legend.scheduler-border to also use:

legend.scheduler-border {
    width:inherit; /* Or auto */
    padding:0 10px; /* To give a bit of padding on the left and right */
    border-bottom:none;
}

JSFiddle example.

You'll also need to ensure your custom stylesheet is being added after Bootstrap to prevent Bootstrap overriding your styling - although your styles here should have higher specificity.

You may also want to add margin-bottom:0; to it as well to reduce the gap between the legend and the divider.