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>
    
  • 相关阅读:
    批处理 星号的替换
    1.1.1 Windows系统内置工具——ipconfig
    2.1 以太网回顾
    书面实验1.3 识别冲突域和广播域
    书面实验1.1:OSI问题
    1.3 OSI模型
    1.2 网络互联模型
    1.1
    如何开启系统服务
    如何查看或启用打开windows功能
  • 原文地址:https://www.cnblogs.com/janas-luo/p/9605049.html
Copyright © 2011-2022 走看看