如何风格输入类型=收音机？

-7

我想用自定义背景/图像替换默认输入比率选择按钮。还可以在选择其中一个输入时添加自定义图像。 enter image description here 如何风格输入类型=收音机？

<div class="form-item"> 
    <label for="right-gender"> 
     Gender 
     <span class="form-required" title="This field is required.">*</span> 
    </label> 
    <div id="right-gender" class="form-radios"> 
     <div class="form-item form-type-radio"> 
      <input id="right-gender-1" class="form-radio" type="radio" value="male" name="submitted[right][gender]"> 
      <label class="option" for="right-gender-1">Male </label> 
     </div> 
     <div class="form-item form-type-radio"> 
      <input id="right-gender-2" class="form-radio" type="radio" value="female" name="submitted[right][gender]"> 
      <label class="option" for="right-gender-2">Female </label> 
     </div> 
    </div> 
</div>

http://jsfiddle.net/L0f8ftdn/

来源

2015-02-11 midts

http://stackoverflow.com/questions/18272497/styling-input-radio-with-css – Cracker0dks 2015-02-11 14:13:35

您可能会因为您的问题没有努力甚至代表您尝试此操作而被拒绝投票。一个更好的问题将包括你自己的努力和一个关于为什么它可能不起作用的具体问题。 – leigero 2015-02-11 14:14:59

@leigero同意！ – NewToJS 2015-02-11 14:16:26

您需要与两个不同的图像的精灵。选中一项，然后取消选中一项。

然后CSS

input.form-radio{ 
display:none; 
} 
input.form-radio+label{ 
position:relative; 
cursor:pointer; 
padding-left:20px; /* need to be greater then the image width */ 
} 
input.form-radio+label:after{ 
position:absolute; 
content:" "; 
top:0; 
left: 0px; 
width: 15px;/*adjust the width of the image */ 
height: 15px; /*adjust the height of the image */ 
background:url(../images/checkbox.png); 
background-repeat:no-repeat; 
background-position:bottom left; 

} 
input.form-radio:checked+label:after{ 
background:url(../images/checkbox.png); 
background-position:top left; 
}

这是我最近的项目。希望这会有所帮助。

来源

2015-02-11 14:31:48 coderpol

-2

http://www.hongkiat.com/blog/css3-checkbox-radio/

有很多教程是的。

隐藏真正的单选按钮：

input[type=radio] { 
    display: none; 
}

添加一个 '伪标签' 使用前：

label:before { 
    content: ""; 
    display: inline-block; 

    width: 16px; 
    height: 16px; 

    margin-right: 10px; 
    position: absolute; 
    left: 0; 
    bottombottom: 1px; 
    background-color: #aaa; 
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px   rgba(255, 255, 255, .8); 
    }

您还可以将图片添加到您的CSS。

要更改选定电台：

input[type=radio]:checked + label:before { 
     content: "\2022"; 
     color: #f3f3f3; 
     font-size: 30px; 
     text-align: center; 
     line-height: 18px; 
    }

来源

2015-02-11 14:13:15 Sirence

请避免张贴链接只有答案，因为链接可能在未来被打破。将解决方案的重要部分粘贴到答案中 – Huangism 2015-02-11 14:14:12

如果您阅读您发布的链接来收集相关位，您可能会发现这个链接无论如何都不会回答OP的问题。 – leigero 2015-02-11 14:16:46

如果你编辑这个以包含图片定制，我会给你一个upvote（即使这个问题很糟糕）。 OP的主要问题是如何覆盖按钮上的图像，这是你省略的一句话“你也可以添加图片...” – leigero 2015-02-11 14:32:35

真的很简单，用jQuery。以从你的问题你的小提琴：http://jsfiddle.net/L0f8ftdn/1/

$('.radiooption').on('click', function() { 
    $('.radiooption').removeClass('checked'); // Make all "unchecked" 
    $(this).addClass('checked'); // Make this one "checked" 
    $(this).prev('input').prop('checked', true); // Make the matching radio checked 
});

你的情况，你的.radiooption将有图像背景，然后你可以用CSS隐藏你的输入。

哦，对未来有帮助的一点：如果你想让人们帮助你，不要成为屁股，不要懒惰。

来源

2015-02-11 14:49:39

如何风格输入类型=收音机？

回答

相关问题