1

Hay alguna forma de darle estilo con css a un checkbox en un form pero sin agregarle clases al input, ya que me van a pasar un formulario por srm y lo ideal seria que heradara los estilos que yo agrego por css. adjunto un ejemplo del mismo.

Lo ideal seria que quedara como la imagen adjunta, pero creo que es imposible hacerlo sin clases. De cualquier manera darle un estilo mas lindo. ejemplo de como me gustaria que quedara

table {
  width: 100%!important
}

table strong {
  color: #333333!important;
  font-family: 'Helvetica-Condensed-Black'!important;
  font-size: 22px!important;
  line-height: 22px;
}

tr:first-child td {
  margin: 16px 0 4px 0;
}

tr:last-child td {
  margin-bottom: 20px!important;
}

tr td:nth-child(even) {
  padding: 10px 15px!important;
  width: 100%!important;
  float: left!important;
  clear: both!important
}

tr td:nth-child(odd) {
  padding: 0px 15px!important;
  width: 100%!important;
  float: left!important;
  clear: both!important;
  font-family: 'HelveticaNeue57CondensedOblique'!important;
  font-size: 15px!important;
}

tr td input {
  width: 100%!important;
  height: 38px!important;
  outline: none!important;
  padding: 8px!important;
  border-left: 3px solid #a80532!important;
  border-right: initial!important;
  border-bottom: initial!important;
  border-top: initial!important;
  background-color: #f1f2f2!important;
}

tr td input[type=submit] {
  padding: 7px 15px!important;
  height: 42px!important;
  background: #a80532!important;
  border: 0 none!important;
  cursor: pointer!important;
  color: #fff!important;
  margin: 8px 0!important;
  font-family: 'Helvetica-Condensed-Black'!important;
  font-size: 17px!important;
}

tr td input[type=submit]:hover {
  border: 1px solid #a80532!important;
  color: #f1f2f2!important
}

select {
  display: inline-block;
  height: 38px!important;
  width: 100%!important;
  outline: none;
  border-left: 3px solid #a80532!important;
  border-right: initial!important;
  border-bottom: initial!important;
  border-top: initial!important;
  color: #74646e;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #f1f2f2;
  -webkit-appearance: none;
  background-position: 356px;
}
<table style='width:600px;background-color:white;color:black'>

  <tr>
    <td colspan='2' style='text-align:left;color:black;font-family:Arial;font-size:14px;text-transform: uppercase;'><strong>¡Empezá ya mismo TÉCNICO en <br> Gestión Bancaria!</strong></td>
  </tr>

  <tr>
    <td style='nowrap:nowrap;text-align:left;font-size:12px;font-family:Arial;width:200px;'>NOMBRE
      <span style='color:red;'>*</span></td>
    <td style='width:250px;'><input type='text' style='width:250px;' maxlength='40' name='First Name' />
    </td>
  </tr>

  <tr>
    <td style='nowrap:nowrap;text-align:left;font-size:12px;font-family:Arial;width:200px;'>APELLIDO<span style='color:red;'>*</span>
    </td>
    <td style='width:250px;'><input type='text' style='width:250px;' maxlength='80' name='Last Name' />
    </td>
  </tr>

  <tr>
    <td style='nowrap:nowrap;text-align:left;font-size:12px;font-family:Arial;width:200px;'>E-MAIL<span style='color:red;'>*</span>
    </td>
    <td style='width:250px;'><input type='text' style='width:250px;' maxlength='100' name='Email' />
    </td>
  </tr>

  <tr>
    <td style='nowrap:nowrap;text-align:left;font-size:12px;font-family:Arial;width:200px;'>TEL&Eacute;FONO</td>
    <td style='width:250px;'>
      <input type='text' style='width:250px;' maxlength='30' name='Phone' />
    </td>
  </tr>
  <tr>
    <td style='nowrap:nowrap;text-align:left;font-size:12px;font-family:Arial;width:200px;'>QUIERO SELECCIONAR LA CARRERA
    </td>
    <td style='width:250px;'>
      <input type='checkbox' style='width:250px;' maxlength='30' name='checkbox' checked="checked" />
    </td>

  </tr>


  <tr>
    <td colspan='2' style='text-align:center; padding-top:15px;font-size:12px;'>
      <input style='font-size:12px;color:black' type='submit' value='Enviar' />

    </td>
  </tr>
</table>

2
  • No entiendo. En el ejemplo que mostraste ya estás cambiando el estilo del checkbox. ¿Ese CSS te llega remotamente y quieres sobreescribir específicamente el checkbox?
    – ffflabs
    Commented el 13 jul. 2018 a las 13:47
  • No no en realidad a mi me mandan una estructura de formulario que al incrustarse en el html tiene que heradar los css que yo agregue para dicho formulario. Yo a la tabla no puedo darle ningun tipo clase.
    – MarianoF
    Commented el 13 jul. 2018 a las 14:07

3 respuestas 3

4

Para convertir un checkbox en un switch, como tú quieres, lo que necesitas es contar con un <label>. Cuando hay un label asociado a un checkbox, pinchar el label equivale a pinchar el checkbox. Puedes darle al label los estilos que quieras usando seudoselectores para modificarlo según su estado.

Dado que el checkbox no tiene clase ni id, puedes identificarlo por su atributo name. Con eso, puedes añadirle un id y luego de él, insertar un elemento <label> al que por conveniencia le daremos id="milabel"

  var checkbox =document.querySelector('input[name=checkbox]');
  checkbox.id='micheckbox';
  var label = document.createElement('label');
  label.id='milabel';
  label.htmlFor='micheckbox';
  checkbox.parentNode.appendChild(label);

En la hoja de estilos, puedes ocultar el checkbox mismo y darle estilo al label (pones esto al final del CSS que mostraste):

#micheckbox {
  display: none;
  margin: 0 auto;
}
#micheckbox + label {
    margin: 0 auto;
    display: block;
}
#micheckbox:checked + label {
  background-color: red;

}
#micheckbox:checked + label:after {
  left: 33px;
}
#milabel {
  transition: all 200ms ease-in-out;
  position: relative;
  height: 40px;
  width: 70px;
  border-radius: 40px;
  cursor: pointer;
  background-color: #ddd;
  color: transparent;
}
#milabel:after {
  transition: all 200ms ease-in-out;
  content: " ";
  position: absolute;
  height: 34px;
  width: 34px;
  border-radius: 50%;
  background-color: white;
  top: 3px;
  left: 3px;
  right: auto;
  box-shadow: 1px 1px 1px gray;
}

var checkbox =document.querySelector('input[name=checkbox]');
  checkbox.id='micheckbox';
  var label = document.createElement('label');
  label.id='milabel';
  label.htmlFor='micheckbox';
  checkbox.parentNode.appendChild(label);
table {
  width: 100%!important
}

table strong {
  color: #333333!important;
  font-family: 'Helvetica-Condensed-Black'!important;
  font-size: 22px!important;
  line-height: 22px;
}

tr:first-child td {
  margin: 16px 0 4px 0;
}

tr:last-child td {
  margin-bottom: 20px!important;
}

tr td:nth-child(even) {
  padding: 10px 15px!important;
  width: 100%!important;
  float: left!important;
  clear: both!important
}

tr td:nth-child(odd) {
  padding: 0px 15px!important;
  width: 100%!important;
  float: left!important;
  clear: both!important;
  font-family: 'HelveticaNeue57CondensedOblique'!important;
  font-size: 15px!important;
}

tr td input {
  width: 100%!important;
  height: 38px!important;
  outline: none!important;
  padding: 8px!important;
  border-left: 3px solid #a80532!important;
  border-right: initial!important;
  border-bottom: initial!important;
  border-top: initial!important;
  background-color: #f1f2f2!important;
}

tr td input[type=submit] {
  padding: 7px 15px!important;
  height: 42px!important;
  background: #a80532!important;
  border: 0 none!important;
  cursor: pointer!important;
  color: #fff!important;
  margin: 8px 0!important;
  font-family: 'Helvetica-Condensed-Black'!important;
  font-size: 17px!important;
}

tr td input[type=submit]:hover {
  border: 1px solid #a80532!important;
  color: #f1f2f2!important
}

select {
  display: inline-block;
  height: 38px!important;
  width: 100%!important;
  outline: none;
  border-left: 3px solid #a80532!important;
  border-right: initial!important;
  border-bottom: initial!important;
  border-top: initial!important;
  color: #74646e;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #f1f2f2;
  -webkit-appearance: none;
  background-position: 356px;
}

#micheckbox {
  display: none;
  margin: 0 auto;
}
#micheckbox + label {
    margin: 0 auto;
    display: block;
}
#micheckbox:checked + label {
  background-color: red;
  
}
#micheckbox:checked + label:after {
  left: 33px;
}
#milabel {
  transition: all 200ms ease-in-out;
  position: relative;
  height: 40px;
  width: 70px;
  border-radius: 40px;
  cursor: pointer;
  background-color: #ddd;
  color: transparent;
}
#milabel:after {
  transition: all 200ms ease-in-out;
  content: " ";
  position: absolute;
  height: 34px;
  width: 34px;
  border-radius: 50%;
  background-color: white;
  top: 3px;
  left: 3px;
  right: auto;
  box-shadow: 1px 1px 1px gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style='width:600px;background-color:white;color:black'>

  <tr>
    <td colspan='2' style='text-align:left;color:black;font-family:Arial;font-size:14px;text-transform: uppercase;'><strong>¡Empezá ya mismo TÉCNICO en <br> Gestión Bancaria!</strong></td>
  </tr>

  <tr>
    <td style='nowrap:nowrap;text-align:left;font-size:12px;font-family:Arial;width:200px;'>NOMBRE
      <span style='color:red;'>*</span></td>
    <td style='width:250px;'><input type='text' style='width:250px;' maxlength='40' name='First Name' />
    </td>
  </tr>

  <tr>
    <td style='nowrap:nowrap;text-align:left;font-size:12px;font-family:Arial;width:200px;'>APELLIDO<span style='color:red;'>*</span>
    </td>
    <td style='width:250px;'><input type='text' style='width:250px;' maxlength='80' name='Last Name' />
    </td>
  </tr>

  <tr>
    <td style='nowrap:nowrap;text-align:left;font-size:12px;font-family:Arial;width:200px;'>E-MAIL<span style='color:red;'>*</span>
    </td>
    <td style='width:250px;'><input type='text' style='width:250px;' maxlength='100' name='Email' />
    </td>
  </tr>

  <tr>
    <td style='nowrap:nowrap;text-align:left;font-size:12px;font-family:Arial;width:200px;'>TEL&Eacute;FONO</td>
    <td style='width:250px;'>
      <input type='text' style='width:250px;' maxlength='30' name='Phone' />
    </td>
  </tr>
  <tr>
    <td style='nowrap:nowrap;text-align:left;font-size:12px;font-family:Arial;width:200px;'>QUIERO SELECCIONAR LA CARRERA
    </td>
    <td style='width:250px;'>
      <input type='checkbox' style='width:250px;' maxlength='30' name='checkbox' checked="checked" />
    </td>

  </tr>


  <tr>
    <td colspan='2' style='text-align:center; padding-top:15px;font-size:12px;'>
      <input style='font-size:12px;color:black' type='submit' value='Enviar' />

    </td>
  </tr>
</table>

3
  • cabe aclarar que se necesita el label pues los input no tienen contenido, y el :after y :before se agregan antes o después del content Commented el 13 jul. 2018 a las 14:26
  • ahh bien entonces el label lo estas aplicando directamente por js? no aplicado al html no?
    – MarianoF
    Commented el 13 jul. 2018 a las 14:31
  • Estuve probando lo que me pasaste y funciona bien, una consulta,en caso de que quiera poner dos check? el segundo deberia tomarme los estilos no?
    – MarianoF
    Commented el 13 jul. 2018 a las 15:49
1

¿El problema es acceder al checkbox sin usar clases o también darle los estilos para que se vea como la imagen que has puesto? Para acceder al checkbox sin usar clases podrías hacerlo así:

table tr td > input[type=checkbox] {
    // estilos
}

Si también tienes problemas para añadir los estilos dímelo.

2
  • dale gracias Aiub voy a probar, pero vos decis que que puedo llegar a hacer el ckeck como la imagen usando clases asi?
    – MarianoF
    Commented el 13 jul. 2018 a las 14:48
  • solo con css no se me ocurre, como te ha dicho amenadiel podrías conseguirlo con js creando un label, pero si tampoco quieres o puedes usar js puedes seleccionar el checkbox de la manera que te he dicho para darle estilos, aunque no puedas convertirlo en un switch. Commented el 13 jul. 2018 a las 15:03
0

Agrega esto al css.

input[type=checkbox]
    { position: relative;
      display: block;
      left: 2px;
      top: -11px;
      width: 7px;
      height: 7px;
      border-width: 1px;
      border-style: solid;
      border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
      content: "";
      background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
      background-repeat: no-repeat;
      background-position: center;
    }
1
  • agregue eso kevin pero no me genera ningun tipo de estilo.
    – MarianoF
    Commented el 13 jul. 2018 a las 14:08

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.