ydm
/
chrome-plugin


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .switch-an {
        position: absolute;
        clip: rect(0, 0, 0, 0);
      }

      .switch-an[type="checkbox"] + label {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 26px;
        border-radius: 1em;
        color: #fff;
        background: #a5a5a5;
        text-align: left;
        font-size: 15px;
        cursor: pointer;
      }

      .switch-an[type="checkbox"] + label::before {
        content: "";
        width: 24px;
        height: 24px;
        top: 1px;
        position: absolute;
        left: 2px;
        border-radius: 100%;
        vertical-align: middle;
        background-color: #fff;
        transition: left 0.2s;
      }

      .switch-an[type="checkbox"] + label::after {
        content: "";
        margin-left: 37px;
        position: relative;
        top: 2px;
      }
      .switch-an[type="checkbox"]:checked + label {
        background-color: #06c;
      }
      .switch-an[type="checkbox"]:checked + label::before {
        transition: left 0.2s;
        left: 34px;
      }

      .switch-an[type="checkbox"]:checked + label::after {
        content: "";
        margin-left: 11px;
      }
    </style>
  </head>
  <body>
    <div class="check-wrap">
      <input type="checkbox" class="switch-an" id="highlight-switch" />
      <label for="highlight-switch"></label>
    </div>
    <!-- <button id="highlight-button">选择元素并高亮</button> -->
    <script src="popup.js"></script>
  </body>
</html>