buttonTest1

来源:互联网 发布:淘宝的淘口令怎么取消 编辑:程序博客网 时间:2024/06/02 03:15
<html>




<head>
<style type="text/css">












input.radio {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;


  border-radius: 50%;
  width: 16px;
  height: 16px;


  border: 2px solid #999;
  transition: 0.2s all linear;
  outline: none;
  margin-right: 5px;


  position: relative;
  top: 4px;
}


input:checked {
  border: 6px solid blue;
}














</style>
</head>


<body>
<label>
  <input type="radio" name="radio" class="radio" />
  <span class="radio-icon"></span>
  ラジオボタン1
</label>    
<label>
  <input type="radio" name="radio" class="radio" />
  <span class="radio-icon"></span>
  ラジオボタン2
</label>


 


<form>
  <fieldset>
  <legend>Please specify your gender</legend>
    <div>
      <input type="radio" id="genderChoice1"
       name="gender" value="male">
      <label for="genderChoice1">Male</label>
      <input type="radio" id="genderChoice2"
       name="gender" value="female">
      <label for="genderChoice2">Female</label>
      <input type="radio" id="genderChoice3"
       name="gender" value="other">
      <label for="genderChoice3">Other</label>
      <input type="radio" id="genderChoice4"
       name="gender" value="notSpecified" checked>
      <label for="genderChoice4">Prefer not to specify</label>
    </div>
    <div>
      <button>Submit</button>
    </div>
  </fieldset>
</form>




<label>
  <input type="checkbox" class="checkbox" />
  <span class="checkbox-icon"></span>
  チェックボックス
</label>


</body>


</html>