Como puedo darle estilo al segundo checkbox y en caso de que por esas casualidades haya un tercer como haría para que reconozca los estilos
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É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 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>