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

Question

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

此链接中的屏幕截图custom fieldset border

它看起来像一个普通的，但我很好奇如何在＆＃34;左边和右边获得那条小垂直线;目的是保留＆＃34;文本。

帮助将受到高度赞赏。

此致

Answer 1

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

fieldset {
  border:1px solid gray;
}
legend {
  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;
}

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

Answer 2

这里是一些改进。

＆＃13;

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望它有所帮助...