如何防止字段集的边框穿过表单标签包围的图例元素？

Posted 2023-02-16

【中文标题】如何防止字段集的边框穿过表单标签包围的图例元素？

【英文标题】：How to prevent the fieldset's border from going through the legend element surrounded by the form tag?

【发布时间】：2016-01-25 16:58:15

【问题描述】：

我有一个带有这些标签的表单：<form>, <fieldset> and <legend>。

字段集的边框穿过图例元素的中间。我仍然希望在我的表单周围有边框，但我不想穿过它的中间。 问题是这样的：如果我只在 css 中尝试字段集和图例，一切正常，但如果我还添加表单样式，我会得到我正在谈论的错误。

.form 
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  min-height: 50px;
  padding: 5px;
  margin: 10px;
  clear: both;
  float: left;
  width: 40%;
  text-align: left;
  border: 0px;

fieldset 
  padding: 10px;
  margin: 2px;
  border: 1px solid #000000;
  width: 60%;

legend 
  padding: 0px;
  border: 0px;
  color: #ff0000;
  text-transform: capitalize;
  font-size: 14px;
  font-weight: bold;
  display: inline-block;

<form>
  <fieldset>
    <legend>Title</legend>
  </fieldset>
</form>

我猜这是表单和字段集/图例样式之间的冲突。我添加position: absolute; 和 translate 方法的原因是将表单放置在浏览器页面的中间。 那么，我怎样才能摆脱通过图例中间的边框字段集，但仍将我的表单定位在页面中心？

【问题讨论】：

你打错了...form而不是just form。 form 是一个元素...不是一个类。

这应该是什么样子？

即使我删除了这个类，情况还是一样...

【参考方案1】：

form legend position:relative; z-index:2

【讨论】：

哦，您可能想为图例添加背景颜色

不，它不适用于 z 索引。相反，我之前尝试过使用背景，但我没想过要添加特定的颜色。只是想让它透明；但是添加我看到的颜色效果很好。这是一个很好的把戏。谢谢。

【参考方案2】：

如果您希望图例出现在字段集边框之外，则必须将其放在字段集元素之前，而不是在其中。但是，这不是valid html，所以使用它需要您自担风险。

form 
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  min-height: 50px;
  padding: 5px;
  margin: 10px;
  clear: both;
  float: left;
  width: 40%;
  text-align: left;
  border: 0px;

fieldset 
  padding: 10px;
  margin: 2px;
  border: 1px solid #000000;
  width: 60%;

legend 
  padding: 0px;
  border: 0px;
  color: #ff0000;
  text-transform: capitalize;
  font-size: 14px;
  font-weight: bold;
  display: inline-block;

<form>
    <legend>Title</legend>
    <fieldset>
    </fieldset>
</form>

【讨论】：

除非它不是“有效”的 HTML。 legend 唯一允许的父级是 fieldset-developer.mozilla.org/en-US/docs/Web/HTML/Element/legend

@Paulie_D 这是真的，它无效，但它仍然适用于每个浏览器。不过，我会在我的答案中添加有效性问题。

感谢您添加有效性问题