CSS3 radio单选按钮美化效果

2018-2-13 10:49| 作者: 蚂蚁小编| 查看: 815| 评论: 0|来自: 蚂蚁部落

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

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

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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: "\2022";
  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: "\2713";
  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: "\2716";
  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>

鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部