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.
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>
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>
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With