自定义单选按钮图像选择

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>