字段集和图例的自定义边框答案

【问题标题】：Custom border for a fieldset and legend字段集和图例的自定义边框
【发布时间】：2018-02-24 01:46:15
【问题描述】：

对不起，如果之前有人问过这个问题，我的朋友让我为他们的网站做这种字段集。

此链接中的屏幕截图

它看起来像一个普通的，但我很好奇如何在“旨在保留”文本的左侧和右侧获得那条小垂直线。

我们将不胜感激。

问候，

【问题讨论】：

标签： html css legend fieldset

【解决方案1】：

您可以使用:before 和:after 伪元素来设置这两条特定垂直线的样式：

fieldset {
  border:1px solid gray;
}
legend {
  padding: 0.2em 0.5em;
  color: gray;
  font-size: 90%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
legend:before {
  position: absolute;
  content: '';
  height: 8px;
  border-left: 1px solid gray;
  left: 0px;
  top: 7px;
}
legend:after {
  position: absolute;
  content: '';
  height: 8px;
  border-right: 1px solid gray;
  right: 0px;
  top: 7px;
}

<form>
  <fieldset>
  <legend>Subscription info</legend>
    <label for="name">Username:</label>
    <input type="text" name="name" id="name" />
    <br />
    <label for="mail">E-mail:</label>
    <input type="text" name="mail" id="mail" />
    <br />
    <label for="address">Address:</label>
    <input type="text" name="address" id="address" size="40" />
  </fieldset>
</form>

【讨论】：

这应该被接受为答案，因为它直截了当地回答了问题，甚至包括一个有效的 sn-p。
@ElliottJones 感谢您的评论。我不确定原始海报是否仍然可以在这里接受这个答案。但是感谢您的投票:)
没问题。当我看到某人在 SO 上遇到麻烦，彻底回答一个问题但没有得到绿色复选标记时，这让我很烦恼，特别是当给出的唯一其他答案声称是一个改进但被打破时。干杯，谢谢。
这个适用于 chrome 90，但不适用于 firefox 88。
@Stephen - 在示例中进行了一些更改，它现在也应该适用于 firefox 88。如果还有其他问题，请检查并告诉我。

【解决方案2】：

这里有一些改进。

fieldset {
  border:1px solid gray;
}
legend {
  position: relative;
  left: 50%; 
     /* Move the legend to the center of the fieldset's top border */

  transform: translateX(-50%); 
     /* Fix the alignment to center perfectly */

  background-color: white; 
     /* Put whatever color you want */

  padding: 0.2em 0.5em;
  color: gray;
  font-size:90%;
  text-align:center;
  position: relative;
}
legend:before {
  position: absolute;
  content: '';
  height: 8px;
  border-left: 1px solid gray;
  left: 0px;
  top: 7px;
}
legend:after {
  position: absolute;
  content: '';
  height: 8px;
  border-right: 1px solid gray;
  right: 0px;
  top: 7px;
}
#line {
  position: absolute;
  top: 19px; /* Position the line */
  left: 12px;
  border-top: 1px solid gray;
  min-width: 20%; /* Fix this according to the white space to hide */
}

<form>
  <fieldset>
 <!-- Add a div here to make up a line to hide
         the space left by the legend -->
  <div id="line"></div>
  <legend>Subscription info</legend>
    <label for="name">Username:</label>
    <input type="text" name="name" id="name" />
    <br />
    <label for="mail">E-mail:</label>
    <input type="text" name="mail" id="mail" />
    <br />
    <label for="address">Address:</label>
    <input type="text" name="address" id="address" size="40" />
  </fieldset>
</form>

希望对你有帮助...

【讨论】：

你运行过sn-p吗？中间有个大洞，标签在旁边？
这个适用于 Firefox 88，但不适用于 chrome 90。