CSSを使って角が丸いフレームの入力画面

CSSを使って角が丸いフレームの入力画面(input text,select)


CSSを適用した入力フォーム

htmlおよびCSS


<form>
  <div class="radius-input">
    <div>
      <div>入力項目1</div>
      <input type="text" placeholder="値を入力してください" data-native-menu="true">
    </div>
    <div>
      <div>入力項目2</div>
      <input type="text" placeholder="値を入力してください" data-native-menu="true">
    </div>
    <div>
      <div>入力項目3</div>
      <input type="text" placeholder="値を入力してください" data-native-menu="true">
    </div>
    <div>
      <div>入力項目4</div>
      <select data-native-menu="true">
        <option>選択項目1</option>
        <option>選択項目2</option>
        <option>選択項目3</option>
        <option>選択項目4</option>
      </select>
    </div>
    <div>
      <div>入力項目5</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>入力項目6</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>





Mam's WebSite