• 关于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"}); })

      

     

  • 相关阅读:
    perl练习——FASTA格式文件中序列GC含量计算&perl数组排序如何获得下标或者键
    短序列组装Sequence Assembly(转载)
    MEGA软件——系统发育树构建方法(图文讲解) 转载
    R语言中的read.table()
    网络七层模型OSI(Open System Interconnection)
    MySQL报错“The server time zone value '�й���׼ʱ��' is unrecognized”
    JDK环境变量配置
    netstat命令
    敏捷方法论(Agile Methodologies)
    0 upgraded, 0 newly installed, 0 to remove and 6 not upgraded解决方法
  • 原文地址:https://www.cnblogs.com/ylboke/p/9685214.html
Copyright © 2020-2023  润新知