Skip to content

Instantly share code, notes, and snippets.

@daphotron

daphotron/SassMeister-input-HTML.html

Created May 6, 2014 21:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save daphotron/0cf279775b3ecd4742d0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save daphotron/0cf279775b3ecd4742d0 to your computer and use it in GitHub Desktop.
Download ZIP
Styling radio buttons with svgs. http://sassmeister.com/gist/0cf279775b3ecd4742d0
Raw
SassMeister-input-HTML.html
<form class="form" action="">
<input class="input-radio" type="radio" name="group" id="option1" value="option1"/>
<label for="option1">Option 1</label>
<input class="input-radio" type="radio" name="group" id="option2" value="option2" checked="checked"/>
<label for="option2">Option 2</label>
</form>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.6)
// Compass (v1.0.0.alpha.18)
// ----
input[type=radio] {
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90px' height='90px'><circle cx='41' cy='36' r='32' stroke='#abab98' stroke-width='6' fill='#fff'/></svg>") 0 0 no-repeat;
background-transparency: 0.5;
background-position: top left;
background-size: 1.6em 1.6em;
display: inline-block;
height: 1.5em;
top: .45em;
outline: 0;
padding: 0.5em 0.6em;
position: relative;
-webkit-appearance: none;
width: 1.6em;
}
input[type=radio]:checked {
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90px' height='90px'><circle cx='41' cy='36' r='32' stroke='#abab98' stroke-width='6' fill='#fff'/><circle cx='41' cy='36' r='18' stroke='#fff' stroke-width='8' fill='#666'/></svg>") 0 0 no-repeat;
background-size: 1.6em 1.6em;
width: 1.6em;
}
label:hover {
cursor: pointer;
}
Raw
SassMeister-output.css
input[type=radio] {
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90px' height='90px'><circle cx='41' cy='36' r='32' stroke='#abab98' stroke-width='6' fill='#fff'/></svg>") 0 0 no-repeat;
background-transparency: 0.5;
background-position: top left;
background-size: 1.6em 1.6em;
display: inline-block;
height: 1.5em;
top: .45em;
outline: 0;
padding: 0.5em 0.6em;
position: relative;
-webkit-appearance: none;
width: 1.6em;
}
input[type=radio]:checked {
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90px' height='90px'><circle cx='41' cy='36' r='32' stroke='#abab98' stroke-width='6' fill='#fff'/><circle cx='41' cy='36' r='18' stroke='#fff' stroke-width='8' fill='#666'/></svg>") 0 0 no-repeat;
background-size: 1.6em 1.6em;
width: 1.6em;
}
label:hover {
cursor: pointer;
}
Raw
SassMeister-rendered.html
<form class="form" action="">
<input class="input-radio" type="radio" name="group" id="option1" value="option1"/>
<label for="option1">Option 1</label>
<input class="input-radio" type="radio" name="group" id="option2" value="option2" checked="checked"/>
<label for="option2">Option 2</label>
</form>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment