1

Estoy copiando este codigo https://codepen.io/vkjgr/pen/HiuJa?page=9 pero cuando lo hago no obtengo el mismo resultado, falta alguna libreria?

introducir la descripción de la imagen aquí

body {
  background-color: #47d1da;
  color: white;
  font: normal 500% Helvetica,Arial;
  text-align: center;
}
input[type="radio"] {
  background-color: transparent;
  border: .0625em solid rgba(255,255,255,.5);
  border-radius: 50%;
  box-shadow: inset 0 0 0 0 white;
  cursor: pointer;
  font: inherit;
  height: 1em;
  outline: none;
  width: 1em;
  -moz-appearance: none;
  -webkit-appearance: none;
  &:checked {
    background-color: white;
    box-shadow: inset 0 0 0 .1875em #47d1da;
    -webkit-transition: background .15s, box-shadow .1s; 
    transition: background .15s, box-shadow .1s; 
  }
}

strong {
  display: block;
  font-size: .5em;
  line-height: 3em;
}
<strong>Pure CSS radio buttons</strong>
<input type="radio" name="group" />
<input type="radio" name="group" checked />

1 respuesta 1

1

Prueba a poner el css de esta manera. Por lo que he visto copiando tal cual da error en algunas lineas y si lo pones así funciona:

body {
    background-color: #47d1da;
    color: white;
    font: normal 500% Helvetica, Arial;
    text-align: center;
}

input[type="radio"] {
    background-color: transparent;
    border: 0.0625em solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    box-shadow: inset 0 0 0 0 white;
    cursor: pointer;
    font: inherit;
    height: 1em;
    outline: none;
    width: 1em;
    -moz-appearance: none;
    -webkit-appearance: none;
}

input[type="radio"]:checked { //aqui se cambia el &checked por el :checked
    background-color: white;
    box-shadow: inset 0 0 0 .1875em #47d1da;
    -webkit-transition: background .15s, box-shadow .1s;
    transition: background .15s, box-shadow .1s;
}

strong {
    display: block;
    font-size: .5em;
    line-height: 3em;
}
<strong>Pure CSS radio buttons</strong>
<input type="radio" name="group" />
<input type="radio" name="group" checked />

Espero que te sirva. Saludos.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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