title: CSS+HTML Radio button - every button have other img how?
body: <p>Hello I want to have for every radio-button other image not for all button's same image.
  How would I do that? I tried it on many ways but none has worked yet..</p>
  
  <p>My code with only 1 img for all radio-button is:</p>
  
  <pre><code>&lt;head&gt;
  &lt;style&gt;
  input[type=radio]:before {
      display: block;
      width: 50px;
      height: 50px;
      content: '';
      position: absolute;
      background-image: url(img.png);
      background-size: 50px 50px;
      pointer-events: none;
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
  }
  
  input[type=radio]:checked:before {
      background-image: url(img.png);
          border:2px solid #3e6cd4;
            box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
  }
  
  .radiostyle {
      display:inline-block;
      width: 50px;
      height: 50px;
      background-color: blue;
  
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;input type="radio" name="radio1" class="radiostyle" value="1"&gt;
  &lt;input type="radio" name="radio1" class="radiostyle" value="2"&gt;
  &lt;input type="radio" name="radio1" class="radiostyle" value="3"&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Thanks for help!</p>