自定义单选按钮图像选择

Question

我正在尝试自定义单选按钮，但遇到了一点问题。图像正确显示，但它不允许我选择单选按钮，因此图像精灵不会移动（移动到所选图像）。

当我将单选按钮的 css 更改为（重新打开显示器）时：

input[type="radio"]
{

}

出现单选按钮（以及图像），当我单击单选按钮以选中时，图像确实会改变大小，但重点是没有默认单选按钮，只有图像。

HTML

   <div class="radio-inline">
       <input type="radio" id="" name="tester"/><label for=""><span></span>Button 1</label>
   </div>
       <div class="radio-inline">
       <input type="radio" id="Radio3" name="tester"/><label for=""><span class="label-font"></span>Button 2</label>
   </div>

CSS

.radio-inline
{
   margin-bottom:15px;
}

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

input[type="radio"] + label
{
    display:inline-block;
    vertical-align:middle;
    cursor:pointer;
    font-size:16px;
    font-weight:200;  
}


input[type="radio"] + label span
{
    display:inline-block;
    width:40px;
    height:40px;
    vertical-align:middle;
    background:url(../images/radio-btn.png) left top no-repeat;
    cursor:pointer;    
}

input[type="radio"]:checked
{
    background:url(../images/radio-btn.png) -40px top no-repeat;
{

Answer 1

CSS 中有错误。这绝对无济于事。

input[type="radio"]:checked
{
    background:url(../images/radio-btn.png) -40px top no-repeat;
{  /** Should be } **/

Answer 2

CSS 中的错误：

input[type="radio"]:checked
{
    background:url(../images/radio-btn.png) -40px top no-repeat;
{

应该改为

input[type="radio"]:checked + label span
{
    background:url(../images/radio-btn.png) -40px top no-repeat;
}

我添加了“+标签跨度”，最后一个括号也是错误的。

Answer 3

试试这个：

/* 
    Hide the original radios and checkboxes
    (but still accessible)

    :not(#foo) > is a rule filter to block browsers
                 that don't support that selector from
                 applying rules they shouldn't

*/
li:not(#foo) > fieldset > div > span > input[type='radio'], 
li:not(#foo) > fieldset > div > span > input[type='checkbox'] {

    /* Hide the input, but have it still be clickable */
    opacity: 0;

    float: left;
    width: 18px;
}


li:not(#foo) > fieldset > div > span > input[type='radio'] + label,
li:not(#foo) > fieldset > div > span > input[type='checkbox'] + label {
    margin: 0;
    clear: none;

    /* Left padding makes room for image */
    padding: 5px 0 4px 24px;

    /* Make look clickable because they are */
    cursor: pointer;

    background: url(off.png) left center no-repeat; 
}

/*
    Change from unchecked to checked graphic
*/
li:not(#foo) > fieldset > div > span > input[type='radio']:checked + label {
    background-image: url(radio.png);
}
li:not(#foo) > fieldset > div > span > input[type='checkbox']:checked + label {
    background-image: url(check.png);
}

在此处查看更多信息：http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/

或查看此 CodePen：http://codepen.io/anon/pen/azFfK

Answer 4

我猜以下内容会为您解决。 您可以为每个州使用任何类型的图像。 下面的示例是为单选按钮和复选框完成的。

你也可以在github上找到sass的解决方案：https://github.com/lpradhap/Awesome-Checkbox-and-radio-button

ul {
  list-style: none;
}
body {
  padding: 100px;
}

/* checkbox and radio buttion */
label {
  display: inline-block
}

label input[type="checkbox"] {
  visibility: hidden;
  margin: 0;
  width: 0;
  height: 0;
  float: left
}

label input[type="checkbox"] + span {
  background-image: url("http://pradhap.com/demo/awesome-check-radio/images/control-sprite.png");
  background-repeat: no-repeat;
  background-position: 0 -40px;
  cursor: pointer;
  -webkit-appearance: none;
  -mozkit-apperance: none;
  width: 20px;
  height: 20px;
  display: inline-block;
  float: left;
  margin: 0 10px 10px 0
}

label input[type="checkbox"] + span:hover {
  background-position: 0 -80px
}

label input[type="checkbox"]:disabled + span {
  background-position: 0px -60px
}

label input[type="checkbox"]:checked + span {
  background-position: 0 0px
}

label input[type="checkbox"]:checked + span:hover {
  background-position: 0 -20px
}

label input[type="radio"] {
  visibility: hidden;
  margin: 0;
  width: 0;
  height: 0;
  float: left
}

label input[type="radio"] + span {
  background-image: url("http://pradhap.com/demo/awesome-check-radio/images/control-sprite.png");
  background-repeat: no-repeat;
  background-position: -22px -40px;
  cursor: pointer;
  -webkit-appearance: none;
  -mozkit-apperance: none;
  width: 20px;
  height: 20px;
  display: inline-block;
  float: left;
  margin: 0 10px 10px 0
}

label input[type="radio"]:disabled + span {
  background-position: -22px -60px
}

label input[type="radio"]:checked + span {
  background-position: -22px 0px
}

label input[type="radio"]:checked + span:hover {
  background-position: -22px -20px
}

label:hover {
  cursor: pointer
}

label:hover input[type="checkbox"] + span {
  background-position: 0 -80px
}

label:hover input[type="checkbox"]:disabled + span {
  background-position: 0px -60px
}

label:hover input[type="checkbox"]:checked + span {
  background-position: 0 -20px
}

label:hover input[type="radio"] + span {
  background-position: -22px -80px
}

label:hover input[type="radio"]:disabled + span {
  background-position: -22px -60px
}

label:hover input[type="radio"]:checked + span {
  background-position: -22px -20px
}


/* dropdown  */
select {
  width: 268px;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: solid 1px #cccccc;
  border-radius: 0;
  height: 34px;
  cursor: pointer;
  background: #fff;
}
select option {
  padding: 10px;
}

<ul>
    <li>
        <label for="text-checkbox">
            <input type="checkbox" name="test-checkbox" id="text-checkbox" />
            <span></span>
            Sample Check box
        </label>
    </li>
    <li>
        <label for="test-radio">
            <input type="radio" name="test-radio" id="test-radio" />
            <span></span>
            Sample radio button
        </label>
        <label for="test-radio1">
            <input type="radio" name="test-radio" id="test-radio1" />
            <span></span>
            Sample radio button
        </label>
    </li>
</ul>