应用与图例标记相同的CSS

Question

我想在我的html组件周围创建一个边框。可以使用HTML图例元素，但我想在表单中使用它。

HTML图例：http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_fieldset

我试过但是标题和边框有问题。下面是相同的jsfiddle。

.temp {
  border: 1px solid #999;
  margin-top: 20px;
  padding: 20px;
  position: relative;
}

http://jsfiddle.net/alpeshprajapati/a6a93fg9/1/

如何实现与传奇相同的输出？感谢。

Answer 1

你几乎就在那里。使标记看起来像legend的最后一步是将background-color添加到与span的{​​{1}}匹配的background-color以及包含它。这样可以确保.temp或border不会显示在文本后面（默认情况下.temp为background-color）。

＆＃13;

＆＃13;

transparent

＆＃13;

.temp > span {
  background-color: white;
  font-size: 21px;
  left: 2%;
  position: absolute;
  top: -15px;
}
.temp {
  border: 1px solid #999;
  margin-top: 20px;
  padding: 20px;
  position: relative;
}

＆＃13;

＆＃13;

＆＃13;