radio、checkbox样式修改

最新推荐文章于 2023-02-22 19:50:13 发布

往地上就是一躺

最新推荐文章于 2023-02-22 19:50:13 发布

阅读量518

点赞数

本文链接：https://blog.csdn.net/u014798510/article/details/53169866

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/check.css">
</head>
<body>
    <div>
        <label>
            <label class="theme-checkbox"><input type="checkbox"><i class="icon-check"></i></label>
            <span>多选</span>
        </label>
        <label>
            <label class="theme-checkbox"><input type="checkbox"><i class="icon-check"></i></label>
            <span>多选</span>
        </label>
        <label>
            <label class="theme-checkbox"><input type="checkbox"><i class="icon-check"></i></label>
            <span>多选</span>
        </label>
    </div>
    <div>
        <label>
            <label class="theme-radio"><input type="radio" name="aa"><i class="icon-radio"></i></label>
            <span>单选</span>
        </label>
        <label>
            <label class="theme-radio"><input type="radio" name="aa"><i class="icon-radio"></i></label>
            <span>单选</span>
        </label>
        <label>
            <label class="theme-radio"><input type="radio" name="aa"><i class="icon-radio"></i></label>
            <span>单选</span>
        </label>
    </div>
</body>
</html>

check.css

.theme-radio {
    width: 16px;
    height: 16px;
    position: relative;
    z-index: 1;
    background-image: url('../imgs/radiow.png');
    display: inline-block;
    vertical-align: middle;
}

.theme-radio input[type=radio] {
  opacity: 0;
  position: absolute;
  cursor: pointer;
  z-index: 99;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

.theme-radio input[type=radio]:checked + .icon-radio {
  display: block;
}

.theme-radio .icon-radio {
  position: absolute;
  display: none;
  width: 8px;
  height: 8px;
  top: 4px;
  left: 4px;
  background-image: url('../imgs/radio.png');
  background-repeat: no-repeat;
  background-position: 50%;
}


.theme-checkbox {
    width: 15px;
    height: 15px;
    border-radius: 2px;
    border: 1px solid #c8c8c8;
    position: relative;
    z-index: 1;
    display: inline-block;
    vertical-align: middle;
}
.theme-checkbox input[type=checkbox] {
    opacity: 0;
    position: absolute;
    cursor: pointer;
    z-index: 99;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}
.theme-checkbox input[type=checkbox]:checked + .icon-check {
    display: block;
    -webkit-animation: fadeYIn .2s ease;
    animation: fadeYIn 0.2s ease;
}
.theme-checkbox .icon-check {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url('../imgs/gou.png');
    background-repeat: no-repeat;
    background-position: 50%;
}

/* keyframes */
@-webkit-keyframes fadeYIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeYIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

效果：这里写图片描述
例子链接：http://pan.baidu.com/s/1dFytJkH

往地上就是一躺

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
radio、checkbox样式修改

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/check.css"></head><body> <div> <label> <lab
复制链接

扫一扫