fieldsetと同じデザイン

fieldsetと同じデザイン

fieldsetの基本スタイルを元に似たような感じのCSSを作ってみた

<div class="similarFieldset">
   <h3>基本情報</h3>
   お名前：<input type="text" class="form-control" />
   メール：<input type="text" class="form-control" />
</div>

css

.similarFieldset {
   /** fieldsetの基本スタイル **/
   display: block;
   -webkit-margin-start: 2px;
   -webkit-margin-end: 2px;
   -webkit-padding-before: 0.35em;
   -webkit-padding-start: 0.75em;
   -webkit-padding-end: 0.75em;
   -webkit-padding-after: 0.625em;
   min-width: -webkit-min-content;
   border-width: 2px;
   border-style: groove;
   border-color: threedface;
   border-image: initial;
   
   /** 追加分 **/
   position: relative;
   margin-top: 1rem;
   padding-top: 2rem;
}
.similarFieldset h3 {
   /** legendの基本スタイル **/
   display: block;
   -webkit-padding-start: 2px;
   -webkit-padding-end: 2px;
   border-width: initial;
   border-style: none;
   border-color: initial;
   border-image: initial;
   
   /** 追加分 **/
   position: absolute;
   top: -1rem;
   margin: 0;
   padding: 0 0.5rem;
   display: inline-block;
   background-color: #fff;
}

※状況に応じてHTMLタグやCSSの微調整が必要。

参考：bootstrap利用時のfieldset

下記は、bootstrap適用時のfieldsetとlegendを使ったサンプル

<form>
   <fieldset>
      <legend>基本情報</legend>
      <label>お名前</label><input type="text" class="form-control" />
      <label>メール</label><input type="text" class="form-control" />
   </fieldset>
</form>

bootstrapではfieldsetタグじゃなくform-groupというクラス名を使う

<form>
   <div class="form-group">
      <label>お名前</label><input type="text" class="form-control" />
      <label>メール</label><input type="text" class="form-control" />
   </div>
</form>