Skip to content

Instantly share code, notes, and snippets.

@rodenacker

rodenacker/material-design-checkboxes-radiobuttons.html

Last active May 24, 2019 17:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rodenacker/9c4bd99b1b5ccbdc6778832756d6164b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rodenacker/9c4bd99b1b5ccbdc6778832756d6164b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
material-design-checkboxes-radiobuttons.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline:0;
}
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
transition: all .1s ease-in-out;
width: 20px;
height: 20px;
border: 2px solid #cccccc;
margin-bottom:0;
}
input[type="checkbox"]:checked {
transform: rotate(-45deg) translate(4px, 1px) scale(1.1);
height:10px;
margin-bottom:10px;
border-color: #3399ff;
border-top-style: none;
border-right-style: none;
}
input[type="radio"] {
appearance: none;
-webkit-appearance: none;
background-color: #FFF;
background-clip: content-box;
border: 1px solid #3399ff;
border-radius: 50%;
height: 20px;
width: 20px;
cursor: pointer;
transition: all 0.2s ease-in-out;
padding: 3px;
}
input[type="radio"]:checked {
background-color: #3399ff;
}
</style>
</head>
<body>
<h2>Checkbox</h2>
<div>
<input type="checkbox">
</div>
<h2>Radio</h2>
<div>
<input name="radio" type="radio">
</div>
<div>
<input name="radio" type="radio">
</div>
</body>
</html>
@rodenacker
Copy link
Author

rodenacker commented May 24, 2019 •
edited
Loading

Super Simple CSS-Only Material Design Checkboxes and Radio Buttons

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment