title: Radiobutton styling with css
body: <p>I am trying to style my Radio button with CSS. When the button is unchecked it should have a black border and and when its checked the circle should be completely black. Sadly my Code doesn't work.</p>
  
  <p><strong>My Code:</strong></p>
  
  <pre><code>&lt;div class="radioss"&gt;
        &lt;input type="radio" id="mann" name="selector"&gt;
        &lt;label for="mann"&gt;Mann&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="radios"&gt;
        &lt;input type="radio" id="mann" name="selector"&gt;
        &lt;label for="mann"&gt;Frau&lt;/label&gt;
  &lt;/div&gt;
  
  
  
  .radioss{
      float:left;
  }
  
  .radios{
     float:left; 
  }
  
  /*Radiobutton*/
  input[type="radio"] {
      display:none;
  }
  
  .mann:not(checked) + label:before{
      content:" ";  
      display: inline-block;
      border: 2px solid black;
      width: 13px;
      height:13px;
      border-radius:7px;
  }
  
  .mann:checked + label:before{
   background-color:black;
  }
  </code></pre>
  
  <p>Does somebody have any idea what i am doing wrong?</p>