Skip to content

Instantly share code, notes, and snippets.

@starryeyez024
Last active September 2, 2016 20:06
Show Gist options
  • Select an option

  • Save starryeyez024/1e2bde95a6c8e43538d3fd2089c19869 to your computer and use it in GitHub Desktop.

Select an option

Save starryeyez024/1e2bde95a6c8e43538d3fd2089c19869 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<table><tr>
<td title="My Work Phone" class="bodyText" colspan="1" style="font-weight:bold;"><span class="chase3ui-relative-position" onclick="javascript:showHideRadioCheck('nocall');" title="Select the radio button to send your activation code to xxx-xxx-xxxx phone number.">
<input id="rdoDelMethod1" type="radio" name="rdoDelMethod" value="rdoDelMethod1"><label for="rdoDelMethod1"></label></span>
<!--mp_trans_disable_start-->xxx-xxx-xxxx<!--mp_trans_disable_end--></td>
</tr>
<tr>
<td title="My Home Phone" class="bodyText" colspan="1" style="font-weight:bold;"><span class="chase3ui-relative-position" onclick="javascript:showHideRadioCheck('nocall');" title="Select the radio button to send your activation code to xxx-xxx-xxxx phone number.">
<input id="rdoDelMethod0" type="radio" name="rdoDelMethod" value="rdoDelMethod0"><label for="rdoDelMethod0"></label></span>
<!--mp_trans_disable_start-->xxx-xxx-xxxx<!--mp_trans_disable_end--></td>
</tr></table>
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
input[type="radio"]+label:before {
display: inline-block;
position: absolute;
content: "";
left: 0px;
width: 20px;
height: 20px;
border-radius: 50%;
background: none repeat scroll 0% 0% #FFF;
border: 1px solid #959595;
vertical-align: middle;
box-shadow: 0px 0px 2px #959595;
}
input[type="radio"]+label:after {
display: inline-block;
content: "";
position: absolute;
left: 0px;
width: 12px;
height: 12px;
border-radius: 50%;
margin-top: 0px;
margin-left: 5px;
border: 1px solid #0b6efd;
}
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-ms-appreance: none;
width: 22px;
height: 22px;
border-radius: 50%;
position: relative;
vertical-align: middle;
margin: 0 10px 0 0;
}
input[type="radio"]+label:after, input[type="radio"]:not(:checked)+label:after {
background: none repeat scroll 0% 0% #FFF;
border: 1px solid #959595;
margin-top: 4px;
margin-left: 4px;
width: 12px;
height: 12px;
}
input[type="radio"]+label:after {
display: inline-block;
content: "";
position: absolute;
left: 0px;
width: 12px;
height: 12px;
border-radius: 50%;
margin-top: 0px;
margin-left: 5px;
border: 1px solid #0b6efd;
}
input[type="radio"]:checked+label:after {
background: none repeat scroll 0% 0% #0B6EFD;
left: 0px;
}
input+label {
vertical-align: middle;
}
input[type="radio"]:checked+label:after {
background: none repeat scroll 0% 0% #0B6EFD;
left: 0px;
}
input[type="radio"]+label:after, input[type="radio"]:not(:checked)+label:after {
background: none repeat scroll 0% 0% #FFF;
border: 1px solid #959595;
margin-top: 4px;
margin-left: 4px;
width: 12px;
height: 12px;
}
input[type="radio"] + label:before {
display: inline-block;
position: absolute;
content: "";
left: 0px;
width: 20px;
height: 20px;
border-radius: 50%;
background: none repeat scroll 0% 0% #FFF;
border: 1px solid #959595;
vertical-align: middle;
box-shadow: 0px 0px 2px #959595;
}
input[type="radio"] + label:after {
display: inline-block;
content: "";
position: absolute;
left: 0px;
width: 12px;
height: 12px;
border-radius: 50%;
margin-top: 0px;
margin-left: 5px;
border: 1px solid #0b6efd;
}
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-ms-appreance: none;
width: 22px;
height: 22px;
border-radius: 50%;
position: relative;
vertical-align: middle;
margin: 0 10px 0 0;
}
input[type="radio"] + label:after, input[type="radio"]:not(:checked) + label:after {
background: none repeat scroll 0% 0% #FFF;
border: 1px solid #959595;
margin-top: 4px;
margin-left: 4px;
width: 12px;
height: 12px;
}
input[type="radio"] + label:after {
display: inline-block;
content: "";
position: absolute;
left: 0px;
width: 12px;
height: 12px;
border-radius: 50%;
margin-top: 0px;
margin-left: 5px;
border: 1px solid #0b6efd;
}
input[type="radio"]:checked + label:after {
background: none repeat scroll 0% 0% #0B6EFD;
left: 0px;
}
input + label {
vertical-align: middle;
}
input[type="radio"]:checked + label:after {
background: none repeat scroll 0% 0% #0B6EFD;
left: 0px;
}
input[type="radio"] + label:after, input[type="radio"]:not(:checked) + label:after {
background: none repeat scroll 0% 0% #FFF;
border: 1px solid #959595;
margin-top: 4px;
margin-left: 4px;
width: 12px;
height: 12px;
}
<table><tr>
<td title="My Work Phone" class="bodyText" colspan="1" style="font-weight:bold;"><span class="chase3ui-relative-position" onclick="javascript:showHideRadioCheck('nocall');" title="Select the radio button to send your activation code to xxx-xxx-xxxx phone number.">
<input id="rdoDelMethod1" type="radio" name="rdoDelMethod" value="rdoDelMethod1"><label for="rdoDelMethod1"></label></span>
<!--mp_trans_disable_start-->xxx-xxx-xxxx<!--mp_trans_disable_end--></td>
</tr>
<tr>
<td title="My Home Phone" class="bodyText" colspan="1" style="font-weight:bold;"><span class="chase3ui-relative-position" onclick="javascript:showHideRadioCheck('nocall');" title="Select the radio button to send your activation code to xxx-xxx-xxxx phone number.">
<input id="rdoDelMethod0" type="radio" name="rdoDelMethod" value="rdoDelMethod0"><label for="rdoDelMethod0"></label></span>
<!--mp_trans_disable_start-->xxx-xxx-xxxx<!--mp_trans_disable_end--></td>
</tr></table>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment