Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Two legends in a fieldset

You can't have two legends for a given fieldset, but is there a way to get a legend effect without using the <legend> tag?

<!-- left legend -->
<fieldset>
    <legend>
        Some Text
    </legend>
</fieldset>

I can add align=right to the legend tag to make it on the right-hand side, but again, I can't have two legends. I'd like to have a legend to the left, and something like a legend to the right. Something like the image below.

How can I accomplish this using HTML and CSS? Here's a Fiddle, I basically want to combine these two. On the left would be regular legend text, and to the right would be a dropdown if it matters.

Fieldset with 2 legends

Update

Here's some code I'm working with :

#shifter {
  position: relative;
}
#cataright {
  position: absolute;
  top: -25px;
  right: 20px;
  font-weight: bold;
}
.grey {
  padding: 15px;
  padding-left: 30px;
  padding-right: 30px;
  border: solid black 3px;
  border-radius: 7px;
  background-color: #DDDDDD;
}
<fieldset class="grey" id="shifter">
  <legend>
    Title
  </legend>
  <div id="cataright">
    Sort by
    <select id="sort" onchange="sort();">
      <option value="original">Release Date</option>
      <option value="popularity">Popularity</option>
      <option value="rating">Highest Rated</option>
    </select>
  </div>
</fieldset>
like image 340
gator Avatar asked May 08 '14 16:05

gator


Video Answer


2 Answers

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>
like image 81
web-tiki Avatar answered Oct 12 '22 09:10

web-tiki


You can use :after pseudo selector to achieve this. SEE THE DEMO. This way, you don't have to use any additional html tags.

fieldset {
    position: relative;
}

fieldset:after {
    content: "Some Text";
    position: absolute;
    margin-top: -25px;
    right: 10px;
    background: #fff;
    padding: 0 5px;
}
like image 23
Dhiraj Avatar answered Oct 12 '22 10:10

Dhiraj