3

He modificado el aspecto de los checkbox para que sean mas monos, pero quiero ponerles un content: "\2713"; en si estan activos y no lo consigo.

Aqui pongo un ejemplo de lo que tengo.

/*chechboxes*/
.checkbox.ChachiCheck { padding-left: 0; }
.checkbox.ChachiCheck label, .checkbox-inline.ChachiCheck { display: inline-block; position: relative; padding-left: 0; }
.checkbox.ChachiCheck label input, .checkbox-inline.ChachiCheck input { display: none; }
.checkbox.ChachiCheck label span, .checkbox-inline.ChachiCheck span { width: 35px; border-radius: 20px; height: 18px; border: 1px solid #dbdbdb; background-color: rgb(255, 255, 255); border-color: rgb(223, 223, 223); box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset; transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s; display: inline-block; vertical-align: middle; margin-left: 10px; }
.checkbox.ChachiCheck label span:before, .checkbox-inline.ChachiCheck span:before {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgb(255,255,255);
    content: " ";
    top: 0;
    position: relative;
    left: 0;
    transition: all 0.3s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.checkbox.ChachiCheck label > input:checked + span:before, .checkbox-inline.ChachiCheck > input:checked + span:before { left: 17px; }


/* Switch Default */
.checkbox.ChachiCheck label > input:checked + span, .checkbox-inline.ChachiCheck > input:checked + span {
    background-color: #6caee0;
    border-color: #6caee0;
    box-shadow: #6caee0 0px 0px 0px 8px inset;
    transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}

.checkbox.ChachiCheck label:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f00c";
position: absolute;
top: 5px;
left: 9px;
color: #000;
font-size: 12px;
line-height: 1;
margin: 1px 0 0 5px;color: #fff
}

.checkbox.ChachiCheck label > input:checked:disabled + span, .checkbox-inline.ChachiCheck > input:checked:disabled + span {
    background-color: rgb(220, 220, 220);
    border-color: rgb(220, 220, 220);
    box-shadow: rgb(220, 220, 220) 0px 0px 0px 8px inset;
    transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.ChachiCheck label > input:disabled + span, .checkbox-inline.ChachiCheck > input:disabled + span {
    background-color: rgb(232,235,238);
    border-color: rgb(255,255,255);
}
.checkbox.ChachiCheck label > input:disabled + span:before, .checkbox-inline.ChachiCheck > input:disabled + span:before {
    background-color: rgb(248,249,250);
    border-color: rgb(243, 243, 243);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">

<div class="checkbox ChachiCheck"><label><input type="checkbox" name="cli_recEq"  id="cli_recEq" value="1" title="Aplicar Recargo equivalencia" /><span></span></label></div>

la idea es hacer esto:

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Es el mismo que usa duckduckgo.com y he estado tratando de ver como lo han hecho ellos pero no se bien donde tengo que aplicarlo yo.

Por otro lado veo que ellos usan una fuente que se llama ddg-serp-icons y yo uso Fontawesome con lo que tendré que cambiar el content por "f00c" y agregar la fuente "Font Awesome 5 Free" pero eso creo que sabré hacerlo.

2
  • Intenta agregando, por ejemplo margin: 1px 0 0 5px;color: #fff a la regla .checkbox.ChachiCheck label:before
    – Marcos
    Commented el 15 ene. 2018 a las 10:58
  • Genial @Marcos con eso funciona perfectamente :) Mil millones de gracias. Si me lo pones como respuesta te doy el respuesta correcta. de todas formas lo he aplicado en el codigo de arriba y se ve que funciona :)
    – Killpe
    Commented el 15 ene. 2018 a las 11:03

1 respuesta 1

4

Un cambio mínimo que podrías hacer para llegar a algo bastante parecido, por ejemplo , sería agregar margin: 1px 0 0 5px; color: #fff a la regla .checkbox.ChachiCheck label:before

Demo:

/*chechboxes*/

.checkbox.ChachiCheck {
  padding-left: 0;
}

.checkbox.ChachiCheck label,
.checkbox-inline.ChachiCheck {
  display: inline-block;
  position: relative;
  padding-left: 0;
}

.checkbox.ChachiCheck label input,
.checkbox-inline.ChachiCheck input {
  display: none;
}

.checkbox.ChachiCheck label span,
.checkbox-inline.ChachiCheck span {
  width: 35px;
  border-radius: 20px;
  height: 18px;
  border: 1px solid #dbdbdb;
  background-color: rgb(255, 255, 255);
  border-color: rgb(223, 223, 223);
  box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset;
  transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s;
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

.checkbox.ChachiCheck label span:before,
.checkbox-inline.ChachiCheck span:before {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgb(255, 255, 255);
  content: " ";
  top: 0;
  position: relative;
  left: 0;
  transition: all 0.3s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.checkbox.ChachiCheck label>input:checked+span:before,
.checkbox-inline.ChachiCheck>input:checked+span:before {
  left: 17px;
}


/* Switch Default */

.checkbox.ChachiCheck label>input:checked+span,
.checkbox-inline.ChachiCheck>input:checked+span {
  background-color: #6caee0;
  border-color: #6caee0;
  box-shadow: #6caee0 0px 0px 0px 8px inset;
  transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}

.checkbox.ChachiCheck label:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00c";
  position: absolute;
  top: 5px;
  left: 9px;
  font-size: 12px;
  line-height: 1;
  /* AQUI las modificaciones para el TIC */
  margin: 1px 0 0 5px;
  color: #fff;
}

.checkbox.ChachiCheck label>input:checked:disabled+span,
.checkbox-inline.ChachiCheck>input:checked:disabled+span {
  background-color: rgb(220, 220, 220);
  border-color: rgb(220, 220, 220);
  box-shadow: rgb(220, 220, 220) 0px 0px 0px 8px inset;
  transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}

.checkbox.ChachiCheck label>input:disabled+span,
.checkbox-inline.ChachiCheck>input:disabled+span {
  background-color: rgb(232, 235, 238);
  border-color: rgb(255, 255, 255);
}

.checkbox.ChachiCheck label>input:disabled+span:before,
.checkbox-inline.ChachiCheck>input:disabled+span:before {
  background-color: rgb(248, 249, 250);
  border-color: rgb(243, 243, 243);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">

<div class="checkbox ChachiCheck"><label><input type="checkbox" name="cli_recEq"  id="cli_recEq" value="1" title="Aplicar Recargo equivalencia" /><span></span></label></div>

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.