zoukankan      html  css  js  c++  java
  • CSS特效(16)——美化radio、checkbox样式

    美化radio、checkbox样式

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        .radio-beauty-container {
          font-size: 0;
    
        }
    
        .radio-name {
          vertical-align: middle;
          font-size: 16px;
        }
    
        .radio-beauty {
           18px;
          height: 18px;
          box-sizing: border-box;
          display: inline-block;
          border: 1px solid green;
          vertical-align: middle;
          margin: 0 15px 0 3px;
          border-radius: 50%;
    
        }
    
        .radio-beauty:hover {
          box-shadow: 0 0 7px green;
          padding: 2px;
          background-color: green;
          background-clip: content-box;
        }
    
        input[type="radio"]:checked+.radio-beauty {
          padding: 2px;
          background-color: green;
          background-clip: content-box;
        }
      </style>
    </head>
    
    <body>
      <div class="radio-beauty-container">
        <label>
          <span class="radio-name">前端工程师</span>
          <input type="radio" name="radioName" id="radioName1" hidden/>
          <label for="radioName1" class="radio-beauty"></label>
        </label>
        <label>
          <span class="radio-name">后端工程师</span>
          <input type="radio" name="radioName" id="radioName2" hidden/>
          <label for="radioName2" class="radio-beauty"></label>
        </label>
        <label>
          <span class="radio-name">全栈工程师</span>
          <input type="radio" name="radioName" id="radioName3" hidden/>
          <label for="radioName3" class="radio-beauty"></label>
        </label>
      </div>
    </body>
    
    </html>
    
  • 相关阅读:
    权限管理
    Linux常用命令
    SSM的开发步骤分析
    03每日课后作业面试题汇总
    Redis常用命令
    大觅网07day
    消息队列面试题
    bzoj 3745: [Coci2015]Norma
    Codeforces 343E Pumping Stations
    UOJ #236. 【IOI2016】railroad
  • 原文地址:https://www.cnblogs.com/janas-luo/p/9605049.html
Copyright © 2011-2022 走看看