WEB前端

html CSS3 radio单选按钮美化(不用图片)

位置:首页 > WEB前端 > css3教程,2019-08-10 22:43
html CSS3 radio单选按钮美化(不用图片),具体看代码实现过程。

radio单选按钮美化(图0)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html CSS3 radio单选按钮美化(不用图片)</title>
<style>
.radio {
  width: 900px;
  padding: 3% 0%;
  margin: 10px auto;
  background-color: pink;
  text-align: center;
}
.radio label {
  display: inline-block;
  position: relative;
  width: 28px;
  height: 28px;
  border: 1px solid #ccc;
  border-radius: 100%;
  cursor: pointer;
  background-color: #fff;
  margin-right: 10px;
  overflow: hidden;
}
.radio label:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 4px;
  left: 4px;
  background-color: #666;
  border-radius: 50%;
  transform: rotate(-180deg);
  transform-origin: -2px 50%;
  transition: transform .2s ease-in;
}
.radio [type="radio"]:checked + label:after {
  transform: rotate(0);
  transition: transform .2s ease-out;
}
.radio [type="radio"] {
  display: none;
}
</style>
</head>
<body>
  <div class="radio">
    <input type="radio" name="ant" id="radio-1" checked="checked">
    <label for="radio-1"></label>
   
    <input type="radio" name="ant" id="radio-2">
    <label for="radio-2"></label>
   
    <input type="radio" name="ant" id="radio-3">
    <label for="radio-3"></label>
  </div>
</body>
</html>
以上就是radio单选按钮美化代码,大家可以参数学习使用。

TAGS:radio单选按钮美化

猜你喜欢

NewHot