How can I make the background behind a <legend> transparent?

Question

I can't seem to get the background of a <legend> element to be transparent. See this jsFiddle: http://jsfiddle.net/hWZa6/ (tested in Chrome and Firefox)

The effect I am trying to accomplish is actually moving the <legend> element below the top border of the containing <frameset> element, but nothing I do makes the top border complete. It is always missing the bit of the line where the legend would be, whether I try to use transparency or position: http://cl.ly/image/1W043h0I3f0A/Edit%20this%20Fiddle%20-%20jsFiddle.jpg

How can I make the area of border where the legend WOULD be, complete?

Answer 1

You can position it off the screen,

position:absolute; left:-999em;

Or your favorite offsetting technique that's compatible with screenreaders and such. ( Perhaps investigate boilerplate's image replacement styles )

Answer 2

You can add position:absolute to the legend . Optionally add position:relative to the fieldset so you can move things around.

Answer 3

Try this, just hide the fieldset border and wrap the element in a div with a border. http://jsfiddle.net/hWZa6/15/

<div id="wrapper">
  <fieldset>
    <legend>Test</legend>
    The top border is never fully visible, despite the legend being set <code>visibility: hidden</code>.
    <div id="A">
        <div id="B">Upon applying <code>visibility: hidden</code> this div becomes transparent, and the red div behind it is fully visible.</div>
    </div>        
  </fieldset>
</div>
​
fieldset { border: none; }
#wrapper { border: 1px solid black; }
legend { display: block }
#A { background-color: red; width: 300px; height: 150px; padding: 10px;}
#B { background-color: blue; width: 400px; height: 100px;}​

Answer 4

使用此CSS作为legend元素。

legend { margin-left: -9999px; }

Answer 5

If you don't want to, or can't change the HTML, and you don't need the legend text to be visible, you can turn the display off.

legend { display: none; }

If you do have control over the HTML, then @user1289347's solution would work, though it requires adding wrapper elements.