<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>
<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>
扫一扫
338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
