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>