imvkmark/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
<meta name="description" content="自定义Checkbox/Radio">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  <style id="jsbin-css">
dt {
  padding: 1rem;
}
dd {
  margin-left: 1rem;
}
.css-custom_checkbox label,
.css-custom_radio label {
  display: inline-block;
  margin-right: 1em;
}
.css-custom_checkbox input,
.css-custom_radio input {
  opacity: 0;
  position: fixed;
  width: 0;
}
.css-custom_checkbox input + span,
.css-custom_radio input + span {
  display: inline-block;
  background-color: #ff9eb5;
  color: #fff0d1;
  text-align: center;
  height: 2.5rem;
  line-height: 2.5rem;
  width: 2.5rem;
  font-family: sans-serif, Arial;
  font-size: 1rem;
  border-radius: 50%;
}
.css-custom_checkbox input:checked + span,
.css-custom_radio input:checked + span {
  background-color: #ee1f4f;
}
</style>
</head>
  <body>
    <dl>
      <dt>1.以下哪个运动是你喜欢的？</dt>
      <dd class="css-custom_checkbox">
        <label>
          <input type="checkbox" name="b" checked="checked">
          <span>A</span>
        </label>
        <label>
          <input type="checkbox" name="b">
          <span>B</span>
        </label>

        <label>
          <input type="checkbox" name="b">
          <span>C</span>
        </label>

        <label>
          <input type="checkbox" name="b">
          <span>D</span>
        </label>
      </dd>
      <dt>2.遇到喜欢的参赛选手是否参与竞拍？</dt>
      <dd class="css-custom_radio">
        <label>
          <input type="radio" name="i" checked="checked">
          <span>Y</span>
        </label>
        <label>
          <input type="radio" name="i">
          <span>N</span>
        </label>
      </dd>
    </dl>


<script id="jsbin-source-css" type="text/css">dt{
  padding:1rem;
}
dd{
  margin-left:1rem;
}
.css-custom_checkbox, .css-custom_radio {
  label {
    display: inline-block;
    margin-right: 1em;
  }
  input{
    opacity: 0;
    position: fixed;
    width: 0;
    & + span{
      display:inline-block;
      background-color:#ff9eb5;
      color: #fff0d1;
      text-align: center;
      height: 2.5rem;
      line-height: 2.5rem;
      width: 2.5rem;
      font-family: sans-serif, Arial;
      font-size: 1rem;
      border-radius: 50%;
    }
    &:checked + span{
      background-color: #ee1f4f;
    }
  }
}</script>
</body>
</html>

## jsbin.movisel.css
dt {
  padding: 1rem;
}
dd {
  margin-left: 1rem;
}
.css-custom_checkbox label,
.css-custom_radio label {
  display: inline-block;
  margin-right: 1em;
}
.css-custom_checkbox input,
.css-custom_radio input {
  opacity: 0;
  position: fixed;
  width: 0;
}
.css-custom_checkbox input + span,
.css-custom_radio input + span {
  display: inline-block;
  background-color: #ff9eb5;
  color: #fff0d1;
  text-align: center;
  height: 2.5rem;
  line-height: 2.5rem;
  width: 2.5rem;
  font-family: sans-serif, Arial;
  font-size: 1rem;
  border-radius: 50%;
}
.css-custom_checkbox input:checked + span,
.css-custom_radio input:checked + span {
  background-color: #ee1f4f;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="自定义Checkbox/Radio">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	dt {
	padding: 1rem;
	}
	dd {
	margin-left: 1rem;
	}
	.css-custom_checkbox label,
	.css-custom_radio label {
	display: inline-block;
	margin-right: 1em;
	}
	.css-custom_checkbox input,
	.css-custom_radio input {
	opacity: 0;
	position: fixed;
	width: 0;
	}
	.css-custom_checkbox input + span,
	.css-custom_radio input + span {
	display: inline-block;
	background-color: #ff9eb5;
	color: #fff0d1;
	text-align: center;
	height: 2.5rem;
	line-height: 2.5rem;
	width: 2.5rem;
	font-family: sans-serif, Arial;
	font-size: 1rem;
	border-radius: 50%;
	}
	.css-custom_checkbox input:checked + span,
	.css-custom_radio input:checked + span {
	background-color: #ee1f4f;
	}
	</style>
	</head>
	<body>
	<dl>
	<dt>1.以下哪个运动是你喜欢的？</dt>
	<dd class="css-custom_checkbox">
	<label>
	<input type="checkbox" name="b" checked="checked">
	<span>A</span>
	</label>
	<label>
	<input type="checkbox" name="b">
	<span>B</span>
	</label>

	<label>
	<input type="checkbox" name="b">
	<span>C</span>
	</label>

	<label>
	<input type="checkbox" name="b">
	<span>D</span>
	</label>
	</dd>
	<dt>2.遇到喜欢的参赛选手是否参与竞拍？</dt>
	<dd class="css-custom_radio">
	<label>
	<input type="radio" name="i" checked="checked">
	<span>Y</span>
	</label>
	<label>
	<input type="radio" name="i">
	<span>N</span>
	</label>
	</dd>
	</dl>


	<script id="jsbin-source-css" type="text/css">dt{
	padding:1rem;
	}
	dd{
	margin-left:1rem;
	}
	.css-custom_checkbox, .css-custom_radio {
	label {
	display: inline-block;
	margin-right: 1em;
	}
	input{
	opacity: 0;
	position: fixed;
	width: 0;
	& + span{
	display:inline-block;
	background-color:#ff9eb5;
	color: #fff0d1;
	text-align: center;
	height: 2.5rem;
	line-height: 2.5rem;
	width: 2.5rem;
	font-family: sans-serif, Arial;
	font-size: 1rem;
	border-radius: 50%;
	}
	&:checked + span{
	background-color: #ee1f4f;
	}
	}
	}</script>
	</body>
	</html>