fügen Sie ein Bild in eine html-Typ Eingangs-check-box oder radio

Ich versuche, ein Bild angeben, das verwendet werden, für meine deaktiviert und aktiviert-Werte für das html input type checkbox und radio.

Habe ich diese:

background: url("image.png") no-repeat;

aber es scheint nicht zu arbeiten an radio-und checkbox-nur-Taste.

Weiß jemand etwas, was funktioniert?

Hoffe, dass es nicht aufgrund der Positionierung, da die check-box ist sehr klein in Bezug auf einen button? Der Bild-hintergrund, wenn angewendet, können ausgeblendet wurden.

InformationsquelleAutor f1wade | 2011-02-25

2

Werfen Sie einen Blick auf diese Ryan Fait - Custom checkboxes und radio-buttons ... Hoffe, es ist was du suchst 😉

ich habe dieses gesehen, aber es sieht ein wenig Komplex und ich fragte mich, ob es einen einfacheren Weg?
Weiß nicht über alle, aber keine Angst, es ist nicht so kompliziert, wie es scheint
ich habe nur versucht zu bekommen, dass ryan fait Sache zu arbeiten, aber die Bilder nie funktionieren.
Nun, das ist seltsam, ich machte es Arbeit ohne extremen Aufwand. Es muss "das gewisse etwas", das ist falsch und das zwingt ihn, nicht zu arbeiten.
Ich machte es Arbeit, aber ich kann nicht verwalten ausblenden, die "alten" checkbox Bild. Es zeigt die beiden Checkboxen, die eine, die ich erstellt habe und die normale checkbox. Alle helfen mit?

InformationsquelleAutor Elwhis

Gefunden haben, und ich arbeitete eine Antwort.
mit Hilfe von diesen Foren
http://forums.digitalpoint.com/showthread.php?t=665980

alle code ist unten: Sie können kopieren Sie eine Datei und fügen Sie Ihre eigenen Bilder und es wird funktionieren.

<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>

Er funktioniert perfekt, ohne Probleme. Ich war nur verwirrt am Anfang, weil Sie schrieb die Namen von den Bildern mit Leerzeichen. Danke!

InformationsquelleAutor f1wade

In der checkbox, wenn Sie möchten, zu ändern, Bilder oder/und Farbe, dann der optimierte Weg ist http://jsfiddle.net/nsoni/4cHSB/5/ hier klicken Sie entweder auf "item-name" oder auf "aktivieren" und erhalten den Effekt.

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;
    }

InformationsquelleAutor Nidhi

0

Können Sie Stil Checkboxen und radio-buttons durch Reine CSS-Dateien. Benötigen Sie einen JavaScript-plugin (es gibt viele jQuery plugins die es gibt), die dies für Sie tun. Im Grunde, überlagert es ein weiteres element, das über den Standard, indem das Standard-element Verhalten.

es gibt also keine Möglichkeit, in css, um Bilder hinzuzufügen, zu radio-und Checkboxen, was ist der einfachste Weg, es zu tun mit javascript

InformationsquelleAutor linkyndy

Hier ist, wie ich es Tat. Ich bin mit radio-Eingang. Die Eingabefelder werden ausgeblendet und das Bild in jedem Etikett ändert sich, wenn der Eingang ausgewählt/nicht ausgewählt.

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;
}

InformationsquelleAutor user2314737

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.