当前位置: 动力学知识库 > 问答 > 编程问答 >

html - styling google form radio button

问题描述:

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...

html looks like this :

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

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

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

分享给朋友:
您可能感兴趣的文章:
随机阅读: