造型谷歌形式单选按钮

时间:2015-01-12 04:26:07

标签: html css google-form

我正在尝试设置嵌入我网站的谷歌表单,我想改变单选按钮的外观。任何想法我怎么能这样做?我知道怎么做一个单选按钮,标签位于第一位,输入第二位,但这里的输入包含在标签中......

html看起来像这样:

<label>
  <span class="ss-choice-item-control goog-inline-block">
    <input type="radio" name="entry.1070214158" value="Other" id="group_1070214158_3" role="radio" class="ss-q-radio" aria-label="Other">
  </span>
  <span class="ss-choice-label">Other
  </span>
</label>

如果选择了广播,我想将默认的单选按钮外观更改为带有复选标记的自定义方块。我找到了这种方法,其中单选按钮被替换为空方块的精灵图像,当选择项目时,它会移动精灵,因此看起来你在方块内有一个复选标记。我想知道如何使用谷歌表单单选按钮获得相同的结果。这是我在网上发现并尝试实施但没有成功的原因

  <input type="radio" name="details" id="radio1" class="radio" checked="checked"/>
    <label for="radio1" class="radioLabel">Other</label>

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);

0 个答案:

没有答案