Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
​
  <form method="post" action="startgetallenactie.php">
  Dit is een oefenspel voor het oefenen van hexadecimale getallen. Kies een moeilijkheidsgraad en opgave: <BR>
  (alle hexadecimale waarden moeten met een hoofdletter gegeven worden!) <BR><BR>
    <div class="keys" >
      <div class="center">
        <input type="radio" name="moeilijkheidsgraad" value="makkelijk" id="makkelijk" checked>
        <label for="makkelijk"><span>makkelijk</span></label>       
​
        <input type="radio" name="moeilijkheidsgraad" value="moeilijk" id="moeilijk">
        <label for="moeilijk"><span>makkelijk</span></label>
​
        <BR><BR><BR><BR>
​
        <input type="radio" name="waarde" value="dechex" id="dechex" checked>
        <label for="dechex"><span>dec-hex</span></label>            
​
        <input type="radio" name="waarde" value="hexdec" id="hexdec">
        <label for="hexdec"><span>hex-dec</span></label>
​
        <BR><BR><BR>
​
        <input type="radio" name="waarde" value="decbin" id="decbin">
        <label for="decbin"><span>dec-bin</span></label>
​
        <input type="radio" name="waarde" value="bindec" id="bindec">
        <label for="bindec"><span>bin-dec</span></label>
​
        <BR><BR><BR>
​
        <input type="radio" name="waarde" value="hexbin" id="hexbin">
        <label for="hexbin"><span>hex-bin</span></label>            
​
        <input type="radio" name="waarde" value="binhex" id="binhex">
        <label for="binhex"><span>bin-hex</span></label>
      </div>
      
      <BR><BR><BR>
      
      <div class="centerstart">
        <input type="submit" value="Start" id="start">
        <label for="start"><span>start</span></label>
      </div>
        
    </div>
        
    <BR><BR>
  </form>
    
</body>
</html>
 
/* NEW STYLES */
​
input[type="radio"]:checked + label span {
  box-shadow: 0px 0px #6b54d3;
  top: 4px;
}
​
/* end new styles */
​
​
input[type="radio"] {
    display:none;
}
​
input[type="submit"] {
    display:none;
}
​
​
html {
    height: 100%;
    background: white;
    background: radial-gradient(circle, #fff 20%, #ccc);
    background-size: cover;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font: bold 14px Arial, sans-serif;
}
​
.center {
    margin: auto;
    width: 200px;
}
​
.centerstart {
    margin: auto;
    width: 120px;
}
​
.keys span{
    float: left;
    position: relative;
    margin: 0 7px 11px 0;
    cursor: pointer;
    width: 80px;
    height: auto;
    
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
​
    color: #000;
    line-height: 30px;
    text-align: center;
    user-select: none;
​
}
​
.keys span:hover {
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0px 4px (0, 0, 0, 0.1);
    color: white;
}
​
.keys span:active {
    box-shadow: 0px 0px #6b54d3;
    top: 4px;
}
​
input[type=radio]:checked {
    box-shadow: 0px 0px #6b54d3;
    top: 4px;
} 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers