css实现radio单选框美化点击选择效果代码-html代码-BFW代码库

css实现radio单选框美化点击选择效果代码

代码语言：html

代码描述：css实现radio单选框美化点击选择效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

    <style>
    body{
        background: rgb(41,41,41);
        padding: 100px;
        
    }
        /* 隐藏原生radio */
    .bfwradio input[type="radio"] { 
      position: absolute;
      opacity: 0; 
    }
    
    /* label样式 */ 
   .bfwradio label {
      padding: 10px 20px;
      color: grey;
      display: inline-block;
      width: 150px;
      

      border: 1px solid white;
     
      text-align: center;
    }
    
    /* 选中时更改样式 */
   .bfwradio  input[type="radio"]:checked + label {
       background: url("//repo.bfw.wiki/bfwrepo/image/6077f1e1d3008.png") no-repeat right bottom #6699FF;

      color: white;
    }
    .bfwradio input[type="radio"]:checked ~ #content1 {
      display: block;
    }
    
    .bfwrad.........完整代码请登录后点击上方下载按钮下载查看