首页htmlradioHTML Form - 如何使用背景图像自定义单选按钮

HTML Form - 如何使用背景图像自定义单选按钮

我们想知道如何使用背景图像自定义单选按钮。

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
input[type=radio] {
  display: none;
}

input[type=radio]+label span {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  background:url('http://placehold.it/20x20') left top no-repeat;
  background-size: 100px 75px;
}

input[type=radio]:checked+label span {
  background-position: -25px top;
}
</style>
</head>
<body>
  <input id="r1" name="radio" type="radio" value="blah">
  <label for="r1"><span></span>Radio</label>
  <input id="r2" name="radio" type="radio" value="blah2">
  <label for="r2"><span></span>Radio2</label>
</body>
</html>