发表新帖
发表新帖

add an image to a html type input check box or radio

后端 未结
关注
5 693
小鲜肉
小鲜肉 2020-12-03 20:24

I\'m trying to specify an image to be used for my unchecked and checked values for html input type checkbox and radio.

I have got this:

background: u
相关标签:
5条回答
  • 灰色年华
    2020-12-03 20:39

    You cannot style checkboxes and radio buttons by pure CSS. You will need to get a JavaScript plugin (there are plenty of jQuery plugins out there) which will do this for you. Basically, it overlays another element over the default one by keeping the default element's behaviour.

    0 讨论(0)
  • 清歌不尽
    2020-12-03 20:54

    In checkbox if you want to change images or/and color then the optimized way is http://jsfiddle.net/nsoni/4cHSB/5/ here you can click either on "item name" or on "checkbox" and get the effect.

    HTML:

      <div class="had">
        <div class="ch">
            <input type="checkbox" id="sho1" name="chk1">
            <div class="so"></div>
            <label for="sho1">Select one</label>
        </div>
        <div class="ch">
            <input type="checkbox" id="sho2" name="chk2">
            <div class="so"></div>
            <label for="sho2">Select two</label>
        </div>
    </div>

    CSS:

        input {
               display: none;
    }

        input [type=checkbox]:checked+.so{
              background-image:url('http://goo.gl/3tza1X');
              background-repeat:no-repeat;background-color:green;
              border-radius:50%;background-position: -2px -1px;
    }

        input [type=checkbox]:checked+.so+label{
           color: red;
    }

        .so {
             margin: 2px; float: left;height: 30px;width: 30px;
             border: 3px solid #D8D8D8;background-color: #4679BD;
             border-radius: 5px;
    }

        .show {
               margin-left: 30px;
    }

        .had {
               margin: 50px auto;width: 50%;border: 1px solid black;
               height: 30px;padding:10px;
    }

        .ch {
              float: left;margin-left:20px;width:40%
    }

        label {
               height: 30px;width: 100%;position:relative;
               display:block;margin-top: 5px;
    }
    0 讨论(0)
  • 囚心锁ツ
    2020-12-03 20:57

    Take a look at this Ryan Fait - Custom checkboxes and radio buttons ... Hope it's what you're looking for ;)

    0 讨论(0)
  • 遥遥无期
    2020-12-03 21:01

    I have found and worked an answer. with help from these forums http://forums.digitalpoint.com/showthread.php?t=665980

    all code is below: you can copy to a single file and add your own images and it will work.

    <html>
<script type="text/javascript">
//global variables that can be used by ALL the function son this page.
var inputs;
var imgFalse = '52 0 ROff.png';
var imgTrue = '52 0 ROn.png';

//replace the checkbox with an image and setup events to handle it
function replaceChecks() {
    //get all the input fields on the page
    inputs = document.getElementsByTagName('input');

    //cycle trough the input fields
    for(var i=0; i<inputs.length; i++) {

    //check if the input is a checkbox
    if(inputs[i].getAttribute('type') == 'checkbox') {

        //create a new image
        var img = document.createElement('img');

        //check if the checkbox is checked
        if(inputs[i].checked) {
            img.src = imgTrue;
        } else {
            img.src = imgFalse;
        }

        //set image ID and onclick action
        img.id = 'checkImage'+i;
        //set image
        img.onclick = new Function('checkClick('+i+')');

        //place image in front of the checkbox
        inputs[i].parentNode.insertBefore(img, inputs[i]);

        //hide the checkbox
        inputs[i].style.display='none';
    }
}
}

//change the checkbox status and the replacement image
function checkClick(i) {
if(inputs[i].checked) {
    inputs[i].checked = '';
    document.getElementById('checkImage'+i).src=imgFalse;
} else {
    inputs[i].checked = 'checked';
    document.getElementById('checkImage'+i).src=imgTrue;
}
}

</script>
</html>
<body>
<input type="checkbox" />
<script type="text/javascript">replaceChecks();</script>
</body>
    0 讨论(0)
  • 广开言路
    2020-12-03 21:01

    Here is how I did it. I'm using radio input. The input boxes are hidden and the image in each label changes when the input is selected/not selected.

    Jsfiddle: http://jsfiddle.net/EhDsf/

    HTML:

    <div class="options">
    <label title="item1">
        <input type="radio" name="foo" value="0" /> 
      Item 1
        <img />

   </label>
    <label title="item2">
        <input type="radio" name="foo" value="1" />
        Item 2
        <img />
    </label>   
    <label title="item3">
        <input type="radio" name="foo" value="2" />
        Item 3
        <img />
    </label>
</div>

    CSS:

    div.options > label > input {
    visibility: hidden;
}

div.options > label {
    display: block;
    margin: 0 0 0 -10px;
    padding: 0 0 48px 0;  
    height: 20px;
    width: 150px;

}

div.options > label > img {
    display: inline-block;
    padding: 0px;
    height:60px;
    width:60px;
    background: url(https://cdn2.iconfinder.com/data/icons/snipicons/500/thumbs-down-128.png);
    background-repeat: no-repeat;
    background-position:center center;
    background-size:60px 60px;
}

div.options > label > input:checked +img {  
    background: url(https://cdn1.iconfinder.com/data/icons/onebit/PNG/onebit_34.png);
    background-repeat: no-repeat;
    background-position:center center;
    background-size:60px 60px;
}
    0 讨论(0)
 看不清?
提交回复
热议问题