HTMLとCSS
<form>
<div class="radius-input">
<div>
<div>入力項目１</div>
<input type="text" placeholder="値を入力してください" data-native-menu="true">
</div>
<div>
<div>入力項目２</div>
<input type="text" placeholder="値を入力してください" data-native-menu="true">
</div>
<div>
<div>入力項目３</div>
<input type="text" placeholder="値を入力してください" data-native-menu="true">
</div>
<div>
<div>入力項目４</div>
<select data-native-menu="true">
<option>選択項目１</option>
<option>選択項目２</option>
<option>選択項目３</option>
<option>選択項目４</option>
</select>
</div>
<div>
<div>入力項目５</div>
<input type="radio" name="inp5" value="good" id="inp51"><label for="inp51">良い</label>
<input type="radio" name="inp5" value="bad" id="inp52"><label for="inp52">悪い</label>
</div>
<div>
<div>入力項目６</div>
<input type="checkbox" name="inp6" value="blue" id="inp61"><label for="inp61">青</label>
<input type="checkbox" name="inp6" value="red" id="inp62"><label for="inp62">赤</label>
</div>
</div>
</form>
<style>
div.radius-input{
display:flex;
flex-wrap:wrap;
font-size:16pt;
background:#fff;
}
div.radius-input>div{
border:1px solid #8888ff;
margin:1em;
padding:1em 1em 0.5em 1em;
border-radius:0.25em;
position:relative;
min-width:300px;
width:40%;
font-size:1em;
}
div.radius-input>div>div{
position:absolute;
border:none;
background:#ffff;
font-size:1em;
top:-0.7em;
left:1em;
padding:0;
margin:0;
font-size:1em;
}
div.radius-input>div>input[type="text"]{
border:none;
outline:none;
width:100%;
font-size:1em;
}
div.radius-input>div>select{
border:none;
outline:none;
width:100%;
font-size:1em;
}
div.radius-input>div>input[type="radio"]{
width:0.8em;
height:0.8em;
font-size:1em;
}
div.radius-input>div>input[type="checkbox"]{
width:0.8em;
height:0.8em;
font-size:1em;
}
</style>