title: styling google form radio button
body: <p>I'm trying to style google form embedded in my website and i want to change the appearance of radio buttons. Any ideas how can i do that ? i know how to do that with a radio button where label comes first and input second, but here input is wrapped in a label...</p>
  
  <p>html looks like this :</p>
  
  <pre><code>&lt;label&gt;
    &lt;span class="ss-choice-item-control goog-inline-block"&gt;
      &lt;input type="radio" name="entry.1070214158" value="Other" id="group_1070214158_3" role="radio" class="ss-q-radio" aria-label="Other"&gt;
    &lt;/span&gt;
    &lt;span class="ss-choice-label"&gt;Other
    &lt;/span&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p>I want to change default radio button appearance to a custom square with a checkmark if radio is selected. I found this method where radio button is replaced with sprite image of an empty square and when item is selected it shifts the sprite so it looks like you got a checkmark inside square. I would like to know how can i achieve same result with google form radio buttons. This is what i found on the web and tried to implement but without success </p>
  
  <pre><code>  &lt;input type="radio" name="details" id="radio1" class="radio" checked="checked"/&gt;
      &lt;label for="radio1" class="radioLabel"&gt;Other&lt;/label&gt;
  
  input[type=radio].radio {
                position:absolute; 
                z-index:-1000; 
                left:-1000px; 
                overflow: hidden; 
                clip: rect(0 0 0 0); 
                height:1px; 
                width:1px; 
                margin:-1px; 
                padding:0; 
                border:0;
              }
  
              input[type=radio].radio + label.radioLabel {
                padding-left:25px;
                height:17px; 
                display:inline-block;
                line-height:22.5px;
                background-repeat:no-repeat;
                background-position: 0 0;
                vertical-align:middle;
                cursor:pointer;
  
              }
  
              input[type=radio].radio:checked + label.radioLabel {
                background-position: 0 -17px;
              }
              label.radiolabel {
          background-image:url(../Img/check.png);
  </code></pre>