CSS3 radio单选按钮美化效果

快乐打工仔 分类:实例代码

CSS3 radio单选按钮美化效果属于前端实例代码,有关更多实例代码大家可以查看

默认的radio单选按钮虽然说不上丑陋,但是绝对不美观。

下面分享一段代码实例,它实现了对单选按钮的美化效果,代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  outline: 0 !important;
}
/*radio01*/
#radio01:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  text-align: center;
  line-height: 13px;
  font-size: 24px;
  color: #09f;
  border: 2px solid #ddd;
  background-color: #fff;
  box-sizing: border-box;
}
#radio01:checked:after {
  content: "22";
  border-color: #09f;
  transition: all 0.3s ease-in-out;
}
/*radio02*/
#radio02:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  text-align: center;
  line-height: 16px;
  font-size: 12px;
  color: #09f;
  border: 2px solid #ddd;
  background-color: #fff;
  box-sizing: border-box;
}
#radio02:checked:after {
  content: "13";
  border-color: #09f;
  transition: all 0.3s ease-in-out;
}
/*radio03*/
#radio03:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  text-align: center;
  line-height: 16px;
  font-size: 12px;
  color: #09f;
  border: 2px solid #ddd;
  background-color: #fff;
  box-sizing: border-box;
}
#radio03:checked:after {
  content: "16";
  border-color: #09f;
  transition: all 0.5s ease;
}
</style>
</head>
<body>
  <div>
    <div>
      <label for="radio01">前端教程网一</label>
      <input type="radio" name="radio-01" id="radio01" />
    </div>
    <div>
      <label for="radio02">前端教程网二</label>
      <input type="radio" name="radio-01" id="radio02" />
    </div>
    <div>
      <label for="radio03">前端教程网三</label>
      <input type="radio" name="radio-01" id="radio03" />
    </div>
  </div>
</body>
</html>

CSS3 radio单选按钮美化效果,这样的场景在实际项目中还是用的比较多的,关于CSS3 radio单选按钮美化效果就介绍到这了。

回复

我来回复
  • 暂无回复内容