zoukankan      html  css  js  c++  java
  • 关于radio 修改样式问题

    谷歌下: 页面和css如下

    	<!-- 选项按钮 -->
    		<div style="overflow: auto; margin-left: 26%; margin-top: 2%;">
    			<div class="label-bth" style="margin-left: 3%;">
    				<label class="test-label"><input class="test-radio" checked
    					name="Fruit" type="radio" value="01" id="qy"  />
    					<span class="test-radioInput" onclick="qy();"></span>企业 </label>
    			</div>
    
    			<div class="label-bth" style="margin-left: 8%;">
    				<label class="test-label"><input class="test-radio"
    					name="Fruit" type="radio" value="02" id="zrr"  />
    					 <span class="test-radioInput" onclick="zrr();"></span>自然人 </label>
    			</div>
    		</div>

    .test-label { display: inline-block; color: #fff; min-80px; } .test-radio { display: none } .test-radioInput { background-color: #fff; border-radius: 100%; display: inline-block; height: 16px; margin-right: 10px; margin-top: -1px; vertical-align: middle; 16px; line-height: 1; } .test-radio:checked+.test-radioInput:after{ background-color: #52C2F8; border-radius: 100%; content: ""; display: inline-block; height: 12px; margin: 2px; 12px; }   

     页面效果如下:

                                                                                                                                                                                                                                                                                          

    由于要兼容ie8  所以 ie8 对伪元素和checked属性都不认识 所以加入了js

    css修改为

    .test-label {
    	display: inline-block;
    	color: #fff;
    	min-80px;
    }
    
    
    .test-radio {
    	display: none
    }
    
    .test-radioInput {
    	background-color: #fff;
    	border-radius: 100%;
    	display: inline-block;
    	height: 16px;
    	margin-right: 10px;
    	margin-top: -1px;
    	vertical-align: middle;
    	 16px;
    	line-height: 1;
    	
    	behavior: url(/sjfwpt/swxxgxpt/swxxgxpt001/PIE.htc);
    } 
    //关于伪元素的部分注释掉
     /* .test-radio:checked+.test-radioInput:after{
    	background-color: #52C2F8;
    	border-radius: 100%;
    	content: "";
    	display: inline-block;
    	height: 12px;
    	margin: 2px;
    	 12px;
    	behavior: url(/sjfwpt/swxxgxpt/swxxgxpt001/PIE.htc);
    } */ 
    

     js

    function qy(){
    	$("#qy").parent().find('span.test-radioInput').css({"display": "inline-block","backgroundColor": "#52C2F8"});
    	$("#zrr").parent().find('span.test-radioInput').css({"display": "inline-block","backgroundColor": "#FFF"});
    }
    function zrr(){
    	$("#zrr").parent().find('span.test-radioInput').css({"display": "inline-block","backgroundColor": "#52C2F8"});
    	$("#qy").parent().find('span.test-radioInput').css({"display": "inline-block","backgroundColor": "#FFF"});
    }
    $(function(){ //进入页面默认选择的是企业 颜色变色 $("#qy").parent().find('span.test-radioInput').css({"display": "inline-block","backgroundColor": "#52C2F8"}); })

      

     

  • 相关阅读:
    Django REST framework+Vue 打造生鲜电商项目(笔记三)
    「数据结构与算法之链表(Python)」(四)
    微服务的注册中心
    git学习(十一) idea git pull 解决冲突
    git学习(十) idea git reset 操作
    git学习(九) idea git stash操作
    git学习(八) git stash操作
    git 学习笔记
    git学习(五) git diff操作
    git:Your branch and 'origin/master' have diverged
  • 原文地址:https://www.cnblogs.com/ylboke/p/9685214.html
Copyright © 2011-2022 走看看