纯css3点击切换图片-纯css3点击切换图标

2019独角兽企业重金招聘Python工程师标准>>>

一：纯css3点击切换-----图片（利用类选择器，input的单选，单击后没显示）

.check-box input{position: absolute; opacity: 0; filter: alpha(opacity=0);}
.check-box input+span{position: relative; display: inline-block; margin-right: 5px; width: 16px; height: 16px; background-position: -78px -38px; vertical-align: top;}
.check-box input+span:after{position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-family: "FontAwesome"; font-size: 10px; color: #fff; line-height: 18px; content: " ";}
.check-box input:checked+span{background-position: -96px -38px;}
 

css  

.touch-hflexbox {-webkit-box-orient: horizontal;}
.touch-hflexbox
{display:-webkit-box;-webkit-box-sizing:border-box;box-sizing: border-box;}
.cd-popup-trigger
{padding:1.8rem .5rem; background:#fff; -webkit-box-align:center;}
.payinfor
{width: 200px;padding:1.8rem .5rem; background:#fff;-webkit-box-align:center;}
.paysel{ margin:0 .5rem;}
.selectgood{}
.paysel input[type="radio"]{-webkit-appearance: none;outline: none; width:2.4rem;
 height:2.5rem; display: inline-block; background:url(../images/icon.png) no-repeat;
  background-size:20rem auto; background-position:-11rem -16.6rem;}
.paysel input[type="radio"]:checked
{background-position:-13.4rem -16.6rem;border: none}
.paysel input{outline:none;}

 

html
 
<div class="payinfor touch-hflexbox">
    <div class="space"></div>
    <div class="paysel">
        <input type="radio">
        微信支付</div>
    <div class="paysel">
        <input type="radio" class="cd-popup-trigger">
        到店自提</div>
</div>

 

 

纯css3点击切换-----图片（利用类选择器，input的单选，单击前后都有变化）

 

css

.selectgood{}
.selectgood input[type="checkbox"]{-webkit-appearance: none;outline: none; 
width:2.4rem; height:2.5rem; display: inline-block; 
background:url(../images/icon.png) no-repeat; background-size:20rem auto; 
background-position:-11rem -16.6rem;}
.selectgood input[type="checkbox"]:checked
{background-position:-13.4rem -16.6rem;border: none}

html

<div class="selectgood"><input type="checkbox"></div>

 

 

二：纯css3点击切换图标（利用类选择器，input的单选，单击前后都有变化）

要先引用图标字体

 

css

.xuan_ji_wan{width: 400px; position: relative;}
.xuan_ji_wan span.wan{text-align: right; position: absolute; right:0;}
.check_box{ position: relative;}
.check_box input[type="checkbox"]{ position: absolute; width:100px; height:20px;
line-height: 20px; opacity:0; z-index: 2;}
.check_box input[type="checkbox"]~i{ font-size:15px; color: #000;}
.check_box input[type="checkbox"]:checked~i.icon-uncheck:before{content: "\e605"; 
color:#e73d3e}

html

<div class="xuan_ji_wan">
    <span class="check_box">
        <input type="checkbox" name="checkAll" class="checkboxall">
        <i class="icon-uncheck"></i>
        <a href="#">记住登录名</a>
    </span>
</div>

 

//有误的话麻烦联系指正、批评

 

转载于:https://my.oschina.net/parchments/blog/655728