title: :checked selector is not working with input[type=radio]
body: <p>I have tried many times to customize the style of the radioboxes below but I fail , My HTML and CSS code included below .
  Note: I have tried to use <code>+</code> instead of <code>~</code> in this line :</p>
  
  <pre><code>.accountcolormaindiv input[type=radio]:checked ~ .accountcolormaindiv label:before {
  </code></pre>
  
  <p>but the problem still found !</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.accountcolormaindiv input[type=radio] {
    display: none;
  }
  
  .accountcolormaindiv label {
    width: 25px;
    height: 25px;
    display: inline-block;
    margin-bottom: -10px;
    border-radius: 200px;
    cursor: pointer;
    border: 2px solid gray;
    color: #FFF;
    position: relative;
  }
  
  .accountcolormaindiv input[type=radio]:checked~.accountcolormaindiv label:before {
    content: "✔";
    position: absolute;
    color: #FFF;
    left: 50%;
    top: 51%;
    transform: translate(-50%, -44%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="accountcolormaindiv"&gt;
    &lt;input type="radio" checked name="accountcolor" id="onecheckbox" value="one"&gt;
    &lt;input type="radio" name="accountcolor" id="twocheckbox" value="two"&gt;
    &lt;label for="onecheckbox" class="onecheckboxtwo checkboxtwo"&gt;&lt;/label&gt;
    &lt;label for="twocheckbox" class="twocheckboxtwo checkboxtwo"&gt;&lt;/label&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks ^_^</p>