如何将图例放置在字段集边界之外

Question

I am going crazy trying to figure out how to make this work. I would like the legend to be outside of the border. How can I make this happen while keeping the legend tag? As you can see below I tried using span but it is not working.

 body { background-color: #996600; color: black; } fieldset { border: 10px solid #ffffff; border-radius: 10px; background-color: #999900; box-shadow: 10px 10px 5px #888888; position: relative; } legend { font-size: 20px; float: left; } legend span { top: 0px; left: 0px; position: absolute; } input[type=text] { border: 2px solid black; border-radius: 10px; background-color: #cccc80; } input[type=button] { background-color: #996600; border: 2px solid black; border-radius: 5px; color: #c9ae78; font-weight: bolder; } p { font-size: 12px; font-style: italic; } 

 <form method="post" id="contactForm" action="#"> <fieldset> <legend><span>Newsletter Signup</span> </legend> <p>To sign up for our fabulous campaign of useless information that you will never, ever read, please submit your email address here.</p> <label for="email" id="emailLabel">Email</label> <input type="text" id="email" /> <input type="button" name="submit" value="Submit" id="submitButton" /> </fieldset> </form> 

Answer 1

Use position: absolute for your legend, and add a margin-top on your fiedset to compensate this shift:

 body { background-color: #996600; color: black; } fieldset { border: 10px solid #ffffff; border-radius: 10px; background-color: #999900; box-shadow: 10px 10px 5px #888888; position: relative; margin-top: 35px; } fieldset legend { position: absolute; top: -35px; left: 10px; font-size: 20px; } input[type=text] { border: 2px solid black; border-radius: 10px; background-color: #cccc80; } input[type=button] { background-color: #996600; border: 2px solid black; border-radius: 5px; color: #c9ae78; font-weight: bolder; } p { font-size: 12px; font-style: italic; } 

 <form method="post" id="contactForm" action="#"> <fieldset> <legend>Newsletter Signup</legend> <p>To sign up for our fabulous campaign of useless information that you will never, ever read, please submit your email address here.</p> <label for="email" id="emailLabel">Email</label> <input type="text" id="email" /> <input type="button" name="submit" value="Submit" id="submitButton" /> </fieldset> </form> 

Answer 2

Add the following to your legend :

legend {
    position: absolute;
    top: -1em;
    width: 100%;
}

Hope this helps

Answer 3

You could use absolute positioning.
HTML:

<form method="post" id="contactForm" action="#">
    <fieldset>
        <legend>Newsletter Signup</legend>
        <p>To sign up for our fabulous campaign of useless information that you will never, ever read, please submit your email address here.</p>
        <label for="email" id="emailLabel">Email</label>
        <input type="text" id="email" />
        <input type="button" name="submit" value="Submit" id="submitButton" />
    </fieldset>
</form>   

CSS:

body {
    background-color: #996600;
    color: black;
}
form { margin-top:30px; }
fieldset {
    border: 10px solid #ffffff;
    border-radius: 10px;
    background-color: #999900;
    box-shadow: 10px 10px 5px #888888;
    position: absolute;
}

legend {
    font-size: 20px;
    text-align: left;
    position:absolute;
    top:-38px;
}
input[type=text] {
    border: 2px solid black;
    border-radius: 10px;
    background-color: #cccc80; 
}

input[type=button] {
    background-color: #996600; 
    border: 2px solid black;
    border-radius: 5px;
    color: #c9ae78;
    font-weight: bolder;
}

p {
    font-size: 12px;
    font-style: italic;
}   

JSFiddle