What's the easiest way to remove <fieldset> border lines?

HtmlCss

Html Problem Overview


What's the easiest way to remove the border lines of a <fieldset>?

I mean a cross-browser solution... is that possible ?

Html Solutions


Solution 1 - Html

fieldset {
    border: 0;
}

Solution 2 - Html

fieldset {
   border:0 none;
}

Solution 3 - Html

(In regards to Marko's comment)

As far as positioning/styling the <legend>, I hide the <legend> (still put one in there just to be semantic), and position/style an <h2> instead. I find this setup gives me nice styling options for my fieldsets.

<fieldset>
    <legend>Enter Name</legend>
    <h2>Enter Name</h2>
    <p>
        <label for="name">Name:</label>
        <br />
        <input type="text" name="firstname" id="name"/>
    </p>
    <p>
        <input type="submit" value="Submit"/>
    </p>
</fieldset>

fieldset {
    border: 2px solid gray;
    padding: 1em;
    float: left;
    font-family: Arial;
}
legend {
    display: none;
}
h2 {
    border-bottom: 2px solid gray;
    margin: 1em 0;
}
p {
    margin: 1em 0;
}

Solution 4 - Html

Here is a quick easy effective way to style it..

assign a class or id to the fieldset element then style it in css.

<fieldset class="fieldset">	

or

<fieldset id="fieldset">
css.fieldset {
border: none;
}	

or

fieldset {
border: none;
}	

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionaneuryzmView Question on Stackoverflow
Solution 1 - HtmlMarkoView Answer on Stackoverflow
Solution 2 - HtmlAmirouche DoudaView Answer on Stackoverflow
Solution 3 - HtmlJohnBView Answer on Stackoverflow
Solution 4 - HtmlDenView Answer on Stackoverflow