html点击变换图标,纯css3点击切换图片-纯css3点击切换图标

一：纯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

微信支付

到店自提

纯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

二：纯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

记住登录名

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