Question

Closed. This question is opinion-based. It is not currently accepting answers.

想要改进这个问题吗? 更新问题,以便用

我试图将自定义图像用于复选框和无线电按钮。到目前为止,我找到了一个 < a href=> http:// http:// ryanfait.com/resources/ custom- checkboxes-and-radio- buttons/" rel=“nofollow” > css/javascript 解决方案、 20个插件的各种列表或 JQuery 界面。由于许多解决方案来自几年前, 许多插件看起来已经绝迹, 目前是否有解决方案, 或仍有许多分散的办法来解决这个问题?

Answer 1

几乎所有你想要的形态元素,然后是:

Answer 2

我想你想要一个更好的方法, 这样的方式是jQuery:

< 强 > HTML

<!-- Style these: -->
<a class="radio" id="radio1" onclick="radio( 1 );">something cool</a>
<a class="radio" id="radio2" onclick="radio( 2 );">radio2 (or checkbox)</a>
<a class="radio" id="radio3" onclick="radio( 3 );">radio3 (or checkbox)</a>

<input id="radionumber" type="hidden" value="0" />

< 强力 > 标注

function radio(n) {
   $( #radio +n).click();
   $( .radio ).removeClass( selectedRadio );
   $(this).addClass( selectedRadio );
   $( #radionumber ).val( $(this).attr( id ).substring(5); );
}

Answer 3

< a href=> "http://uniformjs.com/" rel="nofollow" >http://uniformjs.com/ 拥有一套漂亮的外观元素,除 ie6 外,浏览器均兼容。

Answer 4

这是我为帮助像你这样的人而做的:

Radio buttons:

window.onload = function() {
  var radioButtonGroups = document.getElementsByClassName( radioGroupContainer );
  for (var i = 0; i != radioButtonGroups.length; i++) {
    var radioButtons = radioButtonGroups[i].getElementsByClassName( radioButtonContainer );
    for (var i = 0; i != radioButtons.length; i++) {
      radioButtons[i].onclick = function() {
        var value = this.children[0].getAttribute( name );
        for (var i = 0; i != radioButtons.length; i++) {
          radioButtons[i].children[0].setAttribute( class ,  radioButtonDot );
        }
        this.children[0].setAttribute( class ,  radioButtonDotActive );
        this.parentNode.setAttribute( name , value);
      };
    }
  }
};

/*
* Created by William Green.
* Questions or comments? Email [email protected]
* I would appreciate credit for this code if you use it; but it is not required.
* Last updated July 26, 2015
* Created July 26, 2015
*
*/

.radioButtonContainer {
  background-color: #eee;
  padding: 5px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  display: table;
  margin-top: 5px;
  margin-bottom: 5px;
}
.radioButtonContainer .radioButtonDot {
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 1px solid #000;
  display: inline-block;
  vertical-align: middle;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -o-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}
.radioButtonContainer .radioButtonDotActive {
  width: 16px;
  height: 16px;
  background-color: #1396DE;
  border: 1px solid transparent;
  display: inline-block;
  vertical-align: middle;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -o-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}
.radioButtonContainer .radioButtonLabel {
  background-color: transparent;
  display: inline-block;
  vertidal-align: middle;
  border: 0;
}

<div class="radioGroupContainer" id="radioChoicesOne">
  <div class="radioButtonContainer">
    <div class="radioButtonDot" name="optionOne"></div>
    <input type="button" class="radioButtonLabel" value="Option One">
  </div>
  <div class="radioButtonContainer">
    <div class="radioButtonDot" name="optionTwo"></div>
    <input type="button" class="radioButtonLabel" value="Option Two">
  </div>
  <div class="radioButtonContainer">
    <div class="radioButtonDot" name="optionThree"></div>
    <input type="button" class="radioButtonLabel" value="Option Three">
  </div>
</div>

<div id="radioButtonGroupOneValue"></div>
<input type="button" value="Get radio button value..." onclick="document.getElementById( radioButtonGroupOneValue ).innerHTML = document.getElementById( radioChoicesOne ).getAttribute( name );">

Checkboxes:

window.onload = function() {
  var checkboxes = document.getElementsByClassName( checkbox );
  for (var i = 0; i != checkboxes.length; i++) {
    if (checkboxes[i].hasAttribute( name ) == false) {
      checkboxes[i].setAttribute( name ,  notChecked );
    } else {
      if (checkboxes[i].getAttribute( name ) ==  checked ) {
        checkboxes[i].setAttribute( name ,  checked );
        checkboxes[i].children[0].className =  checkboxDotActive ;
      }
    }

    checkboxes[i].onclick = function() {
      if (this.getAttribute( name ) ==  checked ) {
        this.setAttribute( name ,  notChecked );
        this.children[0].className =  checkboxDot ;
      } else {
        this.setAttribute( name ,  checked );
        this.children[0].className =  checkboxDotActive ;
      }
    };
  }
};

/*
* Questions or comments? Please email [email protected]
* Credit for this project goes to William Green (me).
* Created July 25, 2015
* Last updated July 25, 2015
* I would like appropriate credit for this code, although it is not required.
*
* Thank you for looking, hope you find it useful.
* Please come back, since I may be adding more features to the code to allow for advanced functionality.
*
* PLEASE NOTE THAT THE  checkboxDot  DIV MUST COME BEFORE ANY OTHER INNER MARKUP.
* IT MUST COME IMMEDIATELY AFTER THE PARENT DIV! IT WILL NOT WORK OTHERWISE!!!
*
* Thank you for showing interest in this code!
*/

/*IMPORTANT STYLES... THE STYLES LATER ARE NOT DIRECTLY RELATED THE THE CHECKBOXES*/

.checkbox {
  background-color: #eee;
  border-radius: 3px;
  padding: 5px;
  display: table;
}
.checkbox input {
  outline: none;
  border: 0;
  background-color: transparent;
  display: inline-block;
  vertical-align: middle;
}
.checkbox .checkboxDot {
  background-color: transparent;
  border: 1px solid #000;
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  -o-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}
.checkbox .checkboxDotActive {
  background-color: #01A1DB;
  border: 1px solid transparent;
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  -o-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}
/*END IMPORTANT STYLES*/

/*START IRRELEVANT STYLES*/

.valueButton {
  margin-top: 10px;
}
/*END IRRELEVANT STYLES*/

<h1>Javascript, html, and css checkboes -- best browser support ever!</h1>


<h3>Normal checkbox</h3>

<div id="checkboxOne" class="checkbox">
  <div class="checkboxDot"></div>
  <input type="button" value="Item 1">
</div>
<div id="checkboxOneStatus"></div>
<input type="button" class="valueButton" onclick="document.getElementById( checkboxOneStatus ).innerHTML = document.getElementById( checkboxOne ).getAttribute( name );" value="Is it checked?">

<h3>Checked by default</h3> 
<div id="checkboxTwo" class="checkbox" name="checked">
  <div class="checkboxDot"></div>
  <input type="button" value="Item 2">
</div>
<div id="checkboxTwoStatus"></div>
<input type="button" class="valueButton" onclick="document.getElementById( checkboxTwoStatus ).innerHTML = document.getElementById( checkboxTwo ).getAttribute( name );" value="Is it checked?">

Radio buttons:

Checkboxes:

友情链接