SHARE
TWEET

Untitled

a guest Apr 16th, 2017 53 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         .box {
  8.             margin-top: 20px;
  9.             font-family: Arial, sans-serif;
  10.  
  11.             font-size: 0;
  12.         }
  13.  
  14.         .box input[type="radio"],
  15.         .box input[type="checkbox"] {
  16.             position: absolute;
  17.             top: -100px;
  18.         }
  19.  
  20.         .box label i {
  21.             background-color: #fff;
  22.             padding: 10px;
  23.             font-style: normal;
  24.             cursor: pointer;
  25.  
  26.             border-style: solid;
  27.             border-color: #aaa;
  28.             border-width: 1px 1px 1px 0;
  29.  
  30.             -webkit-touch-callout: none; /* iOS Safari */
  31.             -webkit-user-select: none; /* Safari */
  32.             -moz-user-select: none; /* Firefox */
  33.             -ms-user-select: none; /* Internet Explorer/Edge */
  34.             user-select: none; /* Chrome and Opera */
  35.  
  36.             font-size: 16px;
  37.         }
  38.  
  39.         .box input:checked + i {
  40.             background-color: #e6e6e6;
  41.         }
  42.  
  43.         .box input:focus + i {
  44.             box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  45.         }
  46.  
  47.         .box input + i:active {
  48.             box-shadow: inset 10px 10px 10px -10px rgba(0, 0, 0, 0.3);
  49.             background-color: #ccc;
  50.         }
  51.  
  52.         .box label:first-child i {
  53.             border-top-left-radius: 5px;
  54.             border-bottom-left-radius: 5px;
  55.             border-left: 1px solid #aaa;
  56.         }
  57.  
  58.         .box label:last-child i {
  59.             border-top-right-radius: 5px;
  60.             border-bottom-right-radius: 5px;
  61.         }
  62.     </style>
  63. </head>
  64. <body>
  65.     <p>Radio:</p>
  66.     <div class="box">
  67.         <label><input type="radio" name="box"><i>Left</i></label>
  68.         <label><input type="radio" name="box"><i>Middle</i></label>
  69.         <label><input type="radio" name="box"><i>Middle</i></label>
  70.         <label><input type="radio" name="box"><i>Right</i></label>
  71.     </div>
  72.  
  73.     <p>Checkbox:</p>
  74.     <div class="box">
  75.         <label><input type="checkbox" name="box"><i>Left</i></label>
  76.         <label><input type="checkbox" name="box"><i>Middle</i></label>
  77.         <label><input type="checkbox" name="box"><i>Middle</i></label>
  78.         <label><input type="checkbox" name="box"><i>Right</i></label>
  79.     </div>
  80.  
  81.     <p>Single:</p>
  82.     <div class="box">
  83.         <label><input type="checkbox" name="box"><i>Left</i></label>
  84.     </div>
  85. </body>
  86. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top