9

Necesito agregarle un estilo a mi checkbox para que quede asi:

introducir la descripción de la imagen aquí

este es mi codigo:

<input type="checkbox" data-role="flipswitch" name="switch" id="switch">

Intente colocar este codigo, pero usa librerias y si la agrego a mi proyecto se daña el css de la pagina:

    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>
    
    <div data-role="page">
      <div data-role="main" class="ui-content">
        <form method="post" action="/action_page_post.php">
          <label for="switch">Flip Toggle Switch:</label>
            <input type="checkbox" data-role="flipswitch" name="switch" id="switch">
            <br>
          <input type="submit" data-inline="true" value="Submit">
        </form>
      </div>
    </div>
    
    </body>

    

4
  • A que te refieres con que "se daña el css de la pagina" ?
    – lois6b
    Commented el 30 may. 2017 a las 14:56
  • @lois6b el css se daña, colocare una imagen Commented el 30 may. 2017 a las 14:58
  • 1
    ¿Por qué no miras el código de jQuery Mobile para ver cómo lo hace? Es sencillo de ver sólo tienes que inspeccionar el elemento y darle al botón par ver cómo cambian las clases y qué estilos tiene cada clase
    – Alvaro Montoro
    Commented el 30 may. 2017 a las 14:59
  • Mira esta pregunta que también trata sobre personalizar un checkbox, igual te ayuda: es.stackoverflow.com/questions/41526/… Commented el 30 may. 2017 a las 15:17

4 respuestas 4

10

Mira este ejemplo tomado de Codepen, usando sólo CSS.

La imagen del background la puedes obviar o cambiarla por otra de tu preferencia.

Codepen es como una librería en línea donde se pueden encontrar interesantes fragmentos de código que nos ayudan a aprender formas de sacarle un óptimo rendimiento al uso de HTML/CSS, combinado o no con Javascript.

/* body background from https://subtlepatterns.com/ */
body { background: #ffffff url(https://subtlepatterns.com/patterns/rough_diagonal.png) top left repeat; } 

.toggleSwitch {
    /* just for presentation */  
    margin:20px 200px;  
}


label {
    /* setup stuff */
    position: relative;
    z-index:1;
    display: block;
    font-size: 14px;
    width: 80px;
    height: 40px;
    font-family: "Helvetica Neue", Arial, Sans-Serif;
    font-weight:bold;
    border-radius: 20px;
    background-clip: padding-box;
    text-align: center;
    background-color: #dadada;;
    /* box-shadow: inset 0 0 6px 1px rgba(00,00,00,.2); */
    
    box-shadow: inset rgba(38, 38, 38, 0.2) 0 0px 0px 1px, /* border */ 
    inset rgba(38, 38, 38, .3) 0 -1px 3px 2px, /* soft SD */ 
    inset rgba(255, 255, 255, .3) 0 1px 0px 4px, /* top HL */ 
    rgba(0, 0, 0, .3) 0 0 3px 2px, /* outer SD */   
      rgba(255, 255, 255, .5) 0 0 3px 2px;
  
  background-image: -webkit-repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, .1) 7.5%),   -webkit-repeating-linear-gradient(left, transparent 0%, transparent 4%, rgba(0, 0, 0, .03) 4.5%),   -webkit-repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, .15) 2.2%), -webkit-linear-gradient(-90deg, #C7C7C7 0%, #E6E6E6 47%, #C7C7C7 53%, #B3B3B3 100%);
}
label input {
    position: absolute;
    opacity: 0; 
}
label span {
  position:absolute;
  display:block;
  width:160px;
  left:-180px;
  top:2px;
  font-size:26px;
  text-align:right;
  color:#444444;
}
label .knob {
    position: absolute;
    margin:0;
    height:40px;
    width:40px;
    border-radius: 20px;
    background-clip: padding-box;
    background:#ffffff;
    z-index: 5;
    top:-1px;
    left:-1px;
    border:1px solid #cccccc;
    box-shadow: 0px 1px 4px 0px rgba(00,00,00,.75);
    transition: 0.18s all ease-out;
}

label:before, label:after {
    position: relative;
    z-index: 2;
  text-shadow: rgba(102, 102, 102, .5) 0 -1px 0, rgba(255, 255, 255, .3) 0 1px 0px;
}
label:before {
    content: attr(data-on);
    color:#22baca;
    float:left;
    padding:12px 0 0 8px;
}
label:after {
    content: attr(data-off);
    float:right;
    padding:12px 6px 0 0;
}
label input:checked + .knob {
    left:41px;
}
<label data-on="ON" data-off="OFF" class="toggleSwitch">  
  <span>Ninjas</span>
  <input type="checkbox" checked="checked"/>
  <span class="knob"></span>
</label>

<label data-on="ON" data-off="OFF" class="toggleSwitch">  
  <span>Kittens</span>
  <input type="checkbox"/>
  <span class="knob"></span>
</label>

<label data-on="ON" data-off="OFF" class="toggleSwitch">  
  <span>Zombies</span>
  <input type="checkbox"/>
  <span class="knob"></span>
</label>

<label data-on="ON" data-off="OFF" class="toggleSwitch">  
  <span>Puppies</span>
  <input type="checkbox" checked="checked"/>
  <span class="knob"></span>
</label>

3
  • sabes como puedo cambiarle el fonfo al check? Commented el 30 may. 2017 a las 15:16
  • Se usa gradientes en el estilo, para personalizar puedes jugar con esta parte: background-image: -webkit-repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, .1) 7.5%), -webkit-repeating-linear-gradient(left, transparent 0%, transparent 4%, rgba(0, 0, 0, .03) 4.5%), -webkit-repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, .15) 2.2%), -webkit-linear-gradient(-90deg, #C7C7C7 0%, #E6E6E6 47%, #C7C7C7 53%, #B3B3B3 100%); dando tu estilo personalizado.
    – A. Cedano
    Commented el 30 may. 2017 a las 15:28
  • gracias :3 te lo agredezco mucho tu ayuda :# Commented el 30 may. 2017 a las 15:51
0

Puedes hacerlo de la siguiente manera:

 .switch {
      position: relative;
      display: inline-block;
      width: 80px;
      height: 34px;
    }
    
    .switch input {display:none;}
    
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .2s;
      transition: .2s;
    }
    
    .slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .2s;
      transition: .2s;
    }
    
    .slider_on {
      position: absolute;
      cursor: pointer;
      top: 8px;
      left: 42px;
      font-weight: 700;
    }
    
    .slider_on:before {
      position: absolute;
      -webkit-transition: .2s;
      transition: .2s;
    }
    
    .slider_off {
      position: absolute;
      cursor: pointer;
      top: 8px;
      left: 8px;
      font-weight: 700;
      display:none;
    }
    
    .slider_off:before {
      position: absolute;
      -webkit-transition: .2s;
      transition: .2s;
    }
    
    input:checked + .slider {
      background-color: #2196F3;
    }
    
    input:focus + .slider {
      box-shadow: 0 0 1px #2196F3;
    }
    
    input:checked + .slider:before {
      -webkit-transform: translateX(46px);
      -ms-transform: translateX(46px);
      transform: translateX(46px);
    }
    
    input:checked + .slider + .slider_on {
      display:none;
    }
    
    input:checked + .slider + .slider_on + .slider_off {
      display:block;
    }
    
<div data-role="page">
  <div data-role="main" class="ui-content">
    <form method="post" action="/action_page_post.php">
       <label for="switch">Flip Toggle Switch:</label>
       <br>
       <br>
   <label class="switch">
    <input type="checkbox">
    <div class="slider"></div>
    <div class="slider_on">ON</div>
    <div class="slider_off">OFF</div>
  </label>
    <br>
    <br>
    <input type="submit" data-inline="true" value="Submit">
   </form>
 </div>
</div>
    
 

0

Buenos dias amigo,

Puedes hacerlo de la siguiente manera tambien

/*! ========================================================================
 * Bootstrap Toggle: bootstrap-toggle.css v2.2.0
 * http://www.bootstraptoggle.com
 * ========================================================================
 * Copyright 2014 Min Hur, The New York Times Company
 * Licensed under MIT
 * ======================================================================== */

.checkbox label .toggle,
.checkbox-inline .toggle {
    margin-left: -20px;
    margin-right: 5px
}

.toggle {
    position: relative;
    overflow: hidden
}

.toggle input[type=checkbox] {
    display: none
}

.toggle-group {
    position: absolute;
    width: 200%;
    top: 0;
    bottom: 0;
    left: 0;
    transition: left .35s;
    -webkit-transition: left .35s;
    -moz-user-select: none;
    -webkit-user-select: none
}

.toggle.off .toggle-group {
    left: -100%
}

.toggle-on {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 50%;
    margin: 0;
    border: 0;
    border-radius: 0
}

.toggle-off {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 0;
    margin: 0;
    border: 0;
    border-radius: 0
}

.toggle-handle {
    position: relative;
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 0;
    height: 100%;
    width: 0;
    border-width: 0 1px
}

.toggle.btn {
    min-width: 59px;
    min-height: 34px
}

.toggle-on.btn {
    padding-right: 24px
}

.toggle-off.btn {
    padding-left: 24px
}

.toggle.btn-lg {
    min-width: 79px;
    min-height: 45px
}

.toggle-on.btn-lg {
    padding-right: 31px
}

.toggle-off.btn-lg {
    padding-left: 31px
}

.toggle-handle.btn-lg {
    width: 40px
}

.toggle.btn-sm {
    min-width: 50px;
    min-height: 30px
}

.toggle-on.btn-sm {
    padding-right: 20px
}

.toggle-off.btn-sm {
    padding-left: 20px
}

.toggle.btn-xs {
    min-width: 35px;
    min-height: 22px
}

.toggle-on.btn-xs {
    padding-right: 12px
}

.toggle-off.btn-xs {
    padding-left: 12px
}

veo que usas boostrap, asi que ese te puede servir

0

Con CSS3 puedes hacerlo....aqui te dejo unos ejemplos:

el html

<h1>CSS3 Checkbox Styles</h1>
<em>Click any button below</em>


<div class="ondisplay">

  <section title=".slideOne">
    <!-- .slideOne -->
    <div class="slideOne">  
      <input type="checkbox" value="None" id="slideOne" name="check" checked />
      <label for="slideOne"></label>
    </div>
    <!-- end .slideOne -->
  </section>

  <section title=".slideTwo">
    <!-- .slideTwo -->
    <div class="slideTwo">  
      <input type="checkbox" value="None" id="slideTwo" name="check" checked />
      <label for="slideTwo"></label>
    </div>
    <!-- end .slideTwo -->
  </section>

  <section title=".slideThree">
    <!-- .slideThree -->
    <div class="slideThree">  
      <input type="checkbox" value="None" id="slideThree" name="check" checked />
      <label for="slideThree"></label>
    </div>
    <!-- end .slideThree -->
  </section>

  <section title=".roundedOne">
    <!-- .roundedOne -->
    <div class="roundedOne">
      <input type="checkbox" value="None" id="roundedOne" name="check" checked />
      <label for="roundedOne"></label>
    </div>
    <!-- end .roundedOne -->
  </section>

  <section title=".roundedTwo">
    <!-- .roundedTwo -->
    <div class="roundedTwo">
      <input type="checkbox" value="None" id="roundedTwo" name="check" checked />
      <label for="roundedTwo"></label>
    </div>
    <!-- end .roundedTwo -->
  </section>

  <section title=".squaredOne">
    <!-- .squaredOne -->
    <div class="squaredOne">
      <input type="checkbox" value="None" id="squaredOne" name="check" checked />
      <label for="squaredOne"></label>
    </div>
    <!-- end .squaredOne -->
  </section>

  <section title=".squaredTwo">
    <!-- .squaredTwo -->
    <div class="squaredTwo">
      <input type="checkbox" value="None" id="squaredTwo" name="check" checked />
      <label for="squaredTwo"></label>
    </div>
    <!-- end .squaredTwo -->
  </section>

  <section title=".squaredThree">
    <!-- .squaredThree -->
    <div class="squaredThree">
      <input type="checkbox" value="None" id="squaredThree" name="check" checked />
      <label for="squaredThree"></label>
    </div>
    <!-- end .squaredThree -->
  </section>

  <section title=".squaredFour">
    <!-- .squaredFour -->
    <div class="squaredFour">
      <input type="checkbox" value="None" id="squaredFour" name="check" checked />
      <label for="squaredFour"></label>
    </div>
    <!-- end .squaredFour -->
  </section>

</div>

el css3

@import "compass/css3";

/* $activeColor: #c0392b; //red */
$activeColor: #27ae60; //green
$darkenColor: darken($activeColor, 20%);
/* $background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/13460/dark_wall.png'); */
$background: #3498db;

/* .slideOne */
.slideOne {
  width: 50px;
  height: 10px;
  background: #333;
  margin: 20px auto;
  position: relative;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
  label {
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: -3px;
    left: -3px;
    cursor: pointer;
    background: #fcfff4;
    background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    border-radius: 50px;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease;
  }
  input[type=checkbox] {
    visibility: hidden;
    &:checked + label {
      left: 37px;
    }  
  }
}
/* end .slideOne */


/* .slideTwo */
.slideTwo {
  width: 80px;
  height: 30px;
  background: #333;
  margin: 20px auto;
  position: relative;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
  &:after {
    content: '';
    position: absolute;
    top: 14px;
    left: 14px;
    height: 2px;
    width: 52px;
    background: #111;
    border-radius: 50px;
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
  }
  label {
    display: block;
    width: 22px;
    height: 22px;
    cursor: pointer;
    position: absolute;
    top: 4px;
    z-index: 1;
    left: 4px;
    background: #fcfff4;
    border-radius: 50px;
    transition: all 0.4s ease;
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    &:after {
      content: '';
      width: 10px;
      height: 10px;
      position: absolute;
      top: 6px;
      left: 6px;
      background: #333;
      border-radius: 50px;
      box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);
    }
  }
  input[type=checkbox] {
    visibility: hidden;
    &:checked + label {
      left: 54px;
      &:after {
        background: $activeColor; /*activeColor*/
      }
    }
  }    
}
/* end .slideTwo */


/* .slideThree */
.slideThree {
  width: 80px;
  height: 26px;
  background: #333;
  margin: 20px auto;
  position: relative;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
  &:after {
    content: 'OFF';
    color: #000;
    position: absolute;
    right: 10px;
    z-index: 0;
    font: 12px/26px Arial, sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 0px rgba(255,255,255,.15);
  }
  &:before {
    content: 'ON';
    color: $activeColor;
    position: absolute;
    left: 10px;
    z-index: 0;
    font: 12px/26px Arial, sans-serif;
    font-weight: bold;
  }
  label {
    display: block;
    width: 34px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 1;
    background: #fcfff4;
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    border-radius: 50px;
    transition: all 0.4s ease;
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
  }
  input[type=checkbox] {
    visibility: hidden;
    &:checked + label {
      left: 43px;
    }
  }    
}
/* end .slideThree */


/* .roundedOne */
.roundedOne {
  width: 28px;
  height: 28px;
  position: relative;
  margin: 20px auto;
  background: #fcfff4;
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
  label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    left: 4px;
    top: 4px;
    background: linear-gradient(top, #222 0%, #45484d 100%);
    border-radius: 50px;
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    &:after {
      content: '';
      width: 16px;
      height: 16px;
      position: absolute;
      top: 2px;
      left: 2px;
      background: $activeColor;
      background: linear-gradient(top, $activeColor 0%, $darkenColor 100%);
      opacity: 0;
      border-radius: 50px;
      box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    }
    &:hover::after {
      opacity: 0.3;
    }
  }
  input[type=checkbox] {
    visibility: hidden;
    &:checked + label:after {
      opacity: 1;
    }
  }    
}
/* end .roundedOne */


/* .roundedTwo */
.roundedTwo {
  width: 28px;
  height: 28px;
  position: relative;
  margin: 20px auto;
  background: #fcfff4;
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
  label {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 4px;
    left: 4px;
    cursor: pointer;
    background: linear-gradient(top, #222 0%, #45484d 100%);
    border-radius: 50px;
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    &:after {
      content: '';
      width: 9px;
      height: 5px;
      position: absolute;
      top: 5px;
      left: 4px;
      border: 3px solid #fcfff4;
      border-top: none;
      border-right: none;
      background: transparent;
      opacity: 0;
      transform: rotate(-45deg);
    }
    &:hover::after {
      opacity: 0.3;
    }
  }
  input[type=checkbox] {
    visibility: hidden;
    &:checked + label:after {
      opacity: 1;
    } 
  }   
}
/* end .roundedTwo */



/* .squaredOne */
.squaredOne {
  width: 28px;
  height: 28px;
  position: relative;
  margin: 20px auto;
  background: #fcfff4;
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
  label {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 4px;
    left: 4px;
    cursor: pointer;
    background: linear-gradient(top, #222 0%, #45484d 100%);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    &:after {
      content: '';
      width: 16px;
      height: 16px;
      position: absolute;
      top: 2px;
      left: 2px;
      background: $activeColor;
      background: linear-gradient(top, $activeColor 0%, $darkenColor 100%);
      box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
      opacity: 0;
    }
    &:hover::after {
      opacity: 0.3;
    }
  }
  input[type=checkbox] {
    visibility: hidden;
    &:checked + label:after {
      opacity: 1;
    }   
  } 
}
/* end .squaredOne */


/* .squaredTwo */
.squaredTwo {
  width: 28px;
  height: 28px;
  position: relative;
  margin: 20px auto;
  background: #fcfff4;
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
  label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    left: 4px;
    top: 4px;
    background: linear-gradient(top, #222 0%, #45484d 100%);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    &:after {
      content: '';
      width: 9px;
      height: 5px;
      position: absolute;
      top: 4px;
      left: 4px;
      border: 3px solid #fcfff4;
      border-top: none;
      border-right: none;
      background: transparent;
      opacity: 0;
      transform: rotate(-45deg);
    }
    &:hover::after {
      opacity: 0.3;
    }
  }
  input[type=checkbox] {
    visibility: hidden;
    &:checked + label:after {
      opacity: 1;
    }    
  }
}
/* end .squaredTwo */


/* .squaredThree */
.squaredThree {
  width: 20px;
  position: relative;
  margin: 20px auto;
  label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(top, #222 0%, #45484d 100%);
    border-radius: 4px;
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
    &:after {
      content: '';
      width: 9px;
      height: 5px;
      position: absolute;
      top: 4px;
      left: 4px;
      border: 3px solid #fcfff4;
      border-top: none;
      border-right: none;
      background: transparent;
      opacity: 0;
      transform: rotate(-45deg);
    }
    &:hover::after {
      opacity: 0.3;
    }
  }
  input[type=checkbox] {
    visibility: hidden;
    &:checked + label:after {
      opacity: 1;
    }    
  }
}
/* end .squaredThree */


/* .squaredFour */
.squaredFour {
  width: 20px;
  position: relative;
  margin: 20px auto;
  label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: #fcfff4;
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    border-radius: 4px;
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    &:after {
      content: '';
      width: 9px;
      height: 5px;
      position: absolute;
      top: 4px;
      left: 4px;
      border: 3px solid #333;
      border-top: none;
      border-right: none;
      background: transparent;
      opacity: 0;
      transform: rotate(-45deg);
    }
    &:hover::after {
      opacity: 0.5;
    }
  }
  input[type=checkbox] {
    visibility: hidden;
    &:checked + label:after {
      opacity: 1;
    }
  }    
}
/* end .squaredFour */





// ** Page Styling - Nothing to do with the Radio Buttons **
*{box-sizing: border-box;}
body {
  background: $background;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  h1, h2, em {
    color: #eee;
    font-size: 30px;
    text-align: center;
    margin: 20px 0 0 0;
    -webkit-font-smoothing: antialiased;
    text-shadow: 0px 1px #000;
  }
  em{
    font-size: 14px;
    text-align: center;
    display: block;
    margin-bottom: 50px;
  }
  .ondisplay{
    text-align:center;
    padding:20px 0;
    section{
      width:100px;
      height:100px;
      background: #555;
      display:inline-block;
      position: relative;
      text-align: center;
      margin-top:5px;
      border: 1px solid gray;
      border-radius: 5px;
      box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.3), 
        0 0 40px rgba(0, 0, 0, 0.1) inset;
      &:after{
/*         visibility: hidden; */
        content:attr(title);
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 3px;
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        -webkit-font-smoothing: antialiased;
        text-shadow: 0px 1px #000; 
      }
    }
  }
}

y js

$( document ).ready(function(){
//   Hide the border by commenting out the variable below
    var $on = 'section';
    $($on).css({
      'background':'none',
      'border':'none',
      'box-shadow':'none'
    });
}); 

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.