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

Posted 2023-02-16

【中文标题】字段集和图例的自定义边框

【英文标题】：Custom border for a fieldset and legend

【发布时间】：2018-02-24 01:46:15

【问题描述】：

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

此链接中的屏幕截图

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

我们将不胜感激。

问候，

【参考方案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。