删除 <fieldset> 边界线的最简单方法是什么？答案

【问题标题】：What's the easiest way to remove <fieldset> border lines?删除 <fieldset> 边界线的最简单方法是什么？
【发布时间】：2018-12-28 15:05:47
【问题描述】：

去除<fieldset> 的边框线的最简单方法是什么？

我的意思是跨浏览器的解决方案……这可能吗？

【问题讨论】：

<fieldset> 是一个非常奇怪的标签，虽然您可以摆脱边界，但如果您尝试做太多其他事情，事情就会变得奇怪......
^^ 比如定位<legend>元素。呃。

标签： html css

【解决方案1】：

fieldset {
    border: 0;
}

【讨论】：

【解决方案2】：

fieldset {
   border:0 none;
}

【讨论】：

【解决方案3】：

（关于Marko's 评论）

就<legend> 的定位/样式而言，我隐藏了<legend>（仍然在其中放置一个只是为了语义），而是定位/样式一个<h2>。我发现此设置为我的字段集提供了不错的样式选项。

JSFiddle 链接：http://jsfiddle.net/axYQs/

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;
}

<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 边框属性的答案是正确答案。

【解决方案4】：

这是一种快速简单有效的样式设置方法..

为 fieldset 元素分配一个类或 id，然后在 css 中设置它的样式。

<fieldset class="fieldset">

或

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

或

fieldset {
border: none;
}

【讨论】：