Skip to content

Instantly share code, notes, and snippets.

@laacz

laacz/cassette.html

Last active March 13, 2018 19:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save laacz/9391288 to your computer and use it in GitHub Desktop.
Save laacz/9391288 to your computer and use it in GitHub Desktop.
Download ZIP
Cassette player buttons (as logical extension to radiobuttons). Rough 6min draft. Demo: http://laacz.lv/tmp/cassette.html
Raw
cassette.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
box-sizing: border-box;
}
.magnetofon {
border-bottom: 1px solid #000;
border-radius: .5rem;
padding-bottom: .09rem;
/*border: 1px solid #ccc;*/
}
.magnetofon input[type=radio] {
display: inline-block;
background-color: #ddd;
border: .3rem solid #fff;
box-shadow: 0 0 0 1px #000;
border-radius: .5rem;
-webkit-appearance: none;
-moz-appearance: none;
width: 1rem;
height: 1rem;
padding: 90%;
margin: 0;
padding: 0;
vertical-align: bottom;
}
.magnetofon input[type=radio]:first-child {
margin-right: .5em;
}
.magnetofon input[type=radio]:checked {
background-color: #000;
}
</style>
</head>
<body>
<span class="magnetofon"><input type="radio" name="magneto-1" value="1"><input type="radio" name="magneto-2" value="1"></span> <label>Casette-player button acts like two radiobuttons, which should be selected simultaneously.</label>
<p>Looks best in Chrome, of course. </p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment