Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Jul 15th, 2012  |  syntax: None  |  size: 12.11 KB  |  views: 42  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. CSS checkbox styling
  2. <ul class="imageless-css-3-form-elements" style="list-style-type: none">
  3.     <li><label><input type="checkbox" class="public"><span style="color:#fff">PUBLIC</span></label></li>
  4.     <li><label><input type="checkbox" class="private"><span style="color:#fff">PRIVATE</span></label></li>
  5.     <li><label><input type="checkbox" class="semi-p"><span style="color:#fff">SEMI-PRIVATE</span></label></li>
  6.     <li><label><input type="checkbox" class="grouped"><span style="color:#fff">GROUPED</span></label></li>
  7.  </ul>
  8.        
  9. .imageless-css-3-form-elements label
  10.         {
  11.             cursor: hand;
  12.             cursor: pointer;
  13.         }
  14.  
  15.         .imageless-css-3-form-elements label input[type="checkbox"],
  16.         .imageless-css-3-form-elements label input[type="radio"],
  17.         .imageless-css-3-form-elements label input[type="checkbox"] + span,
  18.         .imageless-css-3-form-elements label input[type="radio"] + span,
  19.         .imageless-css-3-form-elements label input[type="checkbox"] + span::before,
  20.         .imageless-css-3-form-elements label input[type="radio"] + span::before
  21.         {
  22.             vertical-align: middle;
  23.         }
  24.  
  25.         .imageless-css-3-form-elements label input[type="checkbox"],
  26.         .imageless-css-3-form-elements label input[type="radio"]
  27.         {
  28.             position: absolute;
  29.             filter: alpha(opacity=0);
  30.             -moz-opacity: 0;
  31.             -webkit-opacity: 0;
  32.             opacity: 0;
  33.         }
  34.  
  35.         .imageless-css-3-form-elements label input[type="checkbox"] + span,
  36.         .imageless-css-3-form-elements label input[type="radio"] + span,
  37.         .imageless-css-3-form-elements label input[type="checkbox"] + span::before,
  38.         .imageless-css-3-form-elements label input[type="radio"] + span::before
  39.         {
  40.             display: inline-block;
  41.         }
  42.  
  43.         .imageless-css-3-form-elements label input[type="checkbox"] + span,
  44.         .imageless-css-3-form-elements label input[type="radio"] + span
  45.         {
  46.             font: normal 13px/14px "Segoe UI", Sans-serif;
  47.             font-weight: 900;
  48.         }
  49.  
  50.         .imageless-css-3-form-elements label input[type="checkbox"] + span::before
  51.         {
  52.             content: "2714";
  53.             font-weight: 900;
  54.  
  55.         }
  56.  
  57.         .imageless-css-3-form-elements label input[type="checkbox"] + span::before,
  58.         .imageless-css-3-form-elements label input[type="radio"] + span::before
  59.         {
  60.             text-indent: -9999px;
  61.             width: 12px;
  62.             height: 12px;
  63.             font: 12px/12px Garamond, "Segoe UI", Sans-serif;
  64.             font-weight: 900;
  65.             text-transform: uppercase;
  66.             border: solid 1px #0b70cd;
  67.             border-radius: 3px;
  68.             box-shadow: 0 0 1px 1px #78CCBB; /*#ccc*/
  69.  
  70.             background: #78CCBB;/*#0b70cd;*/
  71.             /*background: -moz-linear-gradient(-45deg, #fefefe, #0b70cd);
  72.             background: -webkit-linear-gradient(-45deg, #fefefe, #0b70cd);
  73.             background: -o-linear-gradient(-45deg, #fefefe, #0b70cd);
  74.             background: -ms-linear-gradient(-45deg, #fefefe, #0b70cd);
  75.             background: linear-gradient(-45deg, #fefefe, #0b70cd);*/
  76.             margin: 0 7px 4px 0;
  77.         }
  78.  
  79.         .imageless-css-3-form-elements label:hover input[type="checkbox"]:not(:disabled) + span::before,
  80.         .imageless-css-3-form-elements label:hover input[type="radio"]:not(:disabled) + span::before
  81.         {
  82.             background: #78CCBB; /*#0b70cd;*/
  83.             /*background: -moz-linear-gradient(45deg, #fefefe, #0b70cd);
  84.             background: -webkit-linear-gradient(45deg, #fefefe, #0b70cd);
  85.             background: -o-linear-gradient(45deg, #fefefe, #0b70cd);
  86.             background: -ms-linear-gradient(45deg, #fefefe, #0b70cd);
  87.             background: linear-gradient(45deg, #fefefe, #0b70cd);*/
  88.             box-shadow: 0 0 1px 2px #78CCBB; /*#ccc*/
  89.         }
  90.  
  91.         .imageless-css-3-form-elements label input[type="checkbox"]:checked + span::before,
  92.         .imageless-css-3-form-elements label input[type="radio"]:checked + span::before
  93.         {
  94.             text-indent: 2px;
  95.             color: #fff;
  96.             text-shadow: 0 0 2px #0b70cd;
  97.             font-weight: 900;
  98.         }
  99.  
  100.         .imageless-css-3-form-elements label input[type="radio"] + span::before
  101.         {
  102.             content: "2022";
  103.             font-size: 22px;
  104.             -moz-border-radius: 12px;
  105.             -webkit-border-radius: 12px;
  106.             border-radius: 12px;
  107.         }
  108.  
  109.         .imageless-css-3-form-elements label input[type="radio"]:checked + span::before
  110.         {
  111.             text-indent: 2px;
  112.         }
  113.  
  114.         .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span::before,
  115.         .imageless-css-3-form-elements label input[type="radio"]:disabled + span::before
  116.         {
  117.             filter: alpha(opacity=50);
  118.             -moz-opacity: .5;
  119.             -webkit-opacity: .5;
  120.             opacity: .5;
  121.         }
  122.  
  123.         .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span,
  124.         .imageless-css-3-form-elements label input[type="radio"]:disabled + span,
  125.         .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span::before,
  126.         .imageless-css-3-form-elements label input[type="radio"]:disabled + span::before
  127.         {
  128.             cursor: default;
  129.         }
  130.        
  131. .public_li{background-color:#78CCBB;}
  132. .private_li{ background-color:#A62929}
  133. .semi-p_li{background-color:#78CCBB;}
  134. .grouped_li{ background-color:#A62929}
  135.        
  136. <ul class="imageless-css-3-form-elements" style="list-style-type: none">
  137.     <li class="public_li"> <label><input type="checkbox" class="public"><span style="color:#fff">PUBLIC</span></label></li>
  138.     <li class="private_li"><label><input type="checkbox" class="private"><span style="color:#fff">PRIVATE</span></label></li>
  139.     <li class="semi-p_li"><label><input type="checkbox" class="semi-p"><span style="color:#fff">SEMI-PRIVATE</span></label></li>
  140.     <li class="grouped"><label><input type="checkbox" class="grouped"><span style="color:#fff">GROUPED</span></label></li>
  141.  </ul>
  142.        
  143. .imageless-css-3-form-elements label
  144.         {
  145.             cursor: hand;
  146.             cursor: pointer;
  147.         }
  148.  
  149.         .imageless-css-3-form-elements label input[type="checkbox"],
  150.         .imageless-css-3-form-elements label input[type="radio"],
  151.         .imageless-css-3-form-elements label input[type="checkbox"] + span,
  152.         .imageless-css-3-form-elements label input[type="radio"] + span,
  153.         .imageless-css-3-form-elements label input[type="checkbox"] + span::before,
  154.         .imageless-css-3-form-elements label input[type="radio"] + span::before
  155.         {
  156.             vertical-align: middle;
  157.         }
  158.  
  159.         .imageless-css-3-form-elements label input[type="checkbox"],
  160.         .imageless-css-3-form-elements label input[type="radio"]
  161.         {
  162.             position: absolute;
  163.             filter: alpha(opacity=0);
  164.             -moz-opacity: 0;
  165.             -webkit-opacity: 0;
  166.             opacity: 0;
  167.         }
  168.  
  169.         .imageless-css-3-form-elements label input[type="checkbox"] + span,
  170.         .imageless-css-3-form-elements label input[type="radio"] + span,
  171.         .imageless-css-3-form-elements label input[type="checkbox"] + span::before,
  172.         .imageless-css-3-form-elements label input[type="radio"] + span::before
  173.         {
  174.             display: inline-block;
  175.         }
  176.  
  177.         .imageless-css-3-form-elements label input[type="checkbox"] + span,
  178.         .imageless-css-3-form-elements label input[type="radio"] + span
  179.         {
  180.             font: normal 13px/14px "Segoe UI", Sans-serif;
  181.             font-weight: 900;
  182.         }
  183.  
  184.         .imageless-css-3-form-elements label input[type="checkbox"] + span::before
  185.         {
  186.             content: "2714";
  187.             font-weight: 900;
  188.  
  189.         }
  190.  
  191.         .imageless-css-3-form-elements label input[type="checkbox"].public + span::before,
  192.         .imageless-css-3-form-elements label input[type="radio"] + span::before
  193.         {
  194.             text-indent: -9999px;
  195.             width: 12px;
  196.             height: 12px;
  197.             font: 12px/12px Garamond, "Segoe UI", Sans-serif;
  198.             font-weight: 900;
  199.             text-transform: uppercase;
  200.             border: solid 1px #0b70cd;
  201.             border-radius: 3px;
  202.             box-shadow: 0 0 1px 1px #78CCBB; /*#ccc*/
  203.  
  204.             background: #78CCBB;/*#0b70cd;*/
  205.             margin: 0 7px 4px 0;
  206.         }
  207.  
  208. .imageless-css-3-form-elements label input[type="checkbox"].private + span::before,
  209.         .imageless-css-3-form-elements label input[type="radio"] + span::before
  210.         {
  211.             text-indent: -9999px;
  212.             width: 12px;
  213.             height: 12px;
  214.             font: 12px/12px Garamond, "Segoe UI", Sans-serif;
  215.             font-weight: 900;
  216.             text-transform: uppercase;
  217.             border: solid 1px #0b70cd;
  218.             border-radius: 3px;
  219.             box-shadow: 0 0 1px 1px #78CCBB; /*#ccc*/
  220.  
  221.             background:  #A62929;/*#0b70cd;*/
  222.             margin: 0 7px 4px 0;
  223.         }
  224.  
  225. .imageless-css-3-form-elements label input[type="checkbox"].semi-p + span::before,
  226.         .imageless-css-3-form-elements label input[type="radio"] + span::before
  227.         {
  228.             text-indent: -9999px;
  229.             width: 12px;
  230.             height: 12px;
  231.             font: 12px/12px Garamond, "Segoe UI", Sans-serif;
  232.             font-weight: 900;
  233.             text-transform: uppercase;
  234.             border: solid 1px #0b70cd;
  235.             border-radius: 3px;
  236.             box-shadow: 0 0 1px 1px #78CCBB; /*#ccc*/
  237.  
  238.             background: #FFD996;/*#0b70cd;*/
  239.             margin: 0 7px 4px 0;
  240.         }
  241.  
  242. .imageless-css-3-form-elements label input[type="checkbox"].grouped + span::before,
  243.         .imageless-css-3-form-elements label input[type="radio"] + span::before
  244.         {
  245.             text-indent: -9999px;
  246.             width: 12px;
  247.             height: 12px;
  248.             font: 12px/12px Garamond, "Segoe UI", Sans-serif;
  249.             font-weight: 900;
  250.             text-transform: uppercase;
  251.             border: solid 1px #0b70cd;
  252.             border-radius: 3px;
  253.             box-shadow: 0 0 1px 1px #78CCBB; /*#ccc*/
  254.  
  255.             background: #81A2CF;/*#0b70cd;*/
  256.             margin: 0 7px 4px 0;
  257.         }
  258.  
  259.         .imageless-css-3-form-elements label:hover input[type="checkbox"]:not(:disabled) + span::before,
  260.         .imageless-css-3-form-elements label:hover input[type="radio"]:not(:disabled) + span::before
  261.         {
  262.             background: #78CCBB; /*#0b70cd;*/
  263.             /*background: -moz-linear-gradient(45deg, #fefefe, #0b70cd);
  264.             background: -webkit-linear-gradient(45deg, #fefefe, #0b70cd);
  265.             background: -o-linear-gradient(45deg, #fefefe, #0b70cd);
  266.             background: -ms-linear-gradient(45deg, #fefefe, #0b70cd);
  267.             background: linear-gradient(45deg, #fefefe, #0b70cd);*/
  268.             box-shadow: 0 0 1px 2px #78CCBB; /*#ccc*/
  269.         }
  270.  
  271.         .imageless-css-3-form-elements label input[type="checkbox"]:checked + span::before,
  272.         .imageless-css-3-form-elements label input[type="radio"]:checked + span::before
  273.         {
  274.             text-indent: 2px;
  275.             color: #fff;
  276.             text-shadow: 0 0 2px #0b70cd;
  277.             font-weight: 900;
  278.         }
  279.  
  280.         .imageless-css-3-form-elements label input[type="radio"] + span::before
  281.         {
  282.             content: "2022";
  283.             font-size: 22px;
  284.             -moz-border-radius: 12px;
  285.             -webkit-border-radius: 12px;
  286.             border-radius: 12px;
  287.         }
  288.  
  289.         .imageless-css-3-form-elements label input[type="radio"]:checked + span::before
  290.         {
  291.             text-indent: 2px;
  292.         }
  293.  
  294.         .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span::before,
  295.         .imageless-css-3-form-elements label input[type="radio"]:disabled + span::before
  296.         {
  297.             filter: alpha(opacity=50);
  298.             -moz-opacity: .5;
  299.             -webkit-opacity: .5;
  300.             opacity: .5;
  301.         }
  302.  
  303.         .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span,
  304.         .imageless-css-3-form-elements label input[type="radio"]:disabled + span,
  305.         .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span::before,
  306.         .imageless-css-3-form-elements label input[type="radio"]:disabled + span::before
  307.         {
  308.             cursor: default;
  309. }
clone this paste RAW Paste Data