it-swarm.com.de

Wie stelle ich Optionsfelder mit Bildern zusammen - lachender Smiley für guter, trauriger Smiley für schlechter?

Ich möchte ein HTML-Formular für Benutzerfeedback erstellen .. Wenn das Feedback insgesamt gut ist, sollte der Benutzer auf ein lachendes Smiley klicken. Wenn das Feedback insgesamt schlecht ist, sollte der Benutzer ein trauriges Smiley auswählen.

Ich denke, das sollte mit Hilfe von Optionsfeldern gemacht werden, mit den Smileys anstelle der Optionsfelder. Vielleicht irre ich mich aber ...

Wissen Sie, wie ich das erreichen kann?

Vielen Dank!

41
learning-html

Lassen Sie uns einfach bleiben, sollen wir. Zunächst einmal mit reinem HTML + CSS: 

<div id="emotion">
    <input type="radio" name="emotion" id="sad" />
        <label for="sad"><img src="sad_image.png" alt="I'm sad" /></label>

    <input type="radio" name="emotion" id="happy" />
        <label for="happy"><img src="happy_image.png" alt="I'm happy" /></label>
</div>

Dies wird sich gut abbauen, wenn kein JavaScript vorhanden ist. Verwenden Sie die Attribute id und for, um die Beschriftung und den Radiobutton zu verknüpfen. Wenn das Bild ausgewählt wird, wird der entsprechende Radiobutton gefüllt. Dies ist wichtig, da der eigentliche Radiobutton mithilfe von JavaScript ausgeblendet werden muss. Nun zu etwas jQuery-Güte. Zuerst das CSS erstellen, das wir brauchen: 

.input_hidden {
    position: absolute;
    left: -9999px;
}

.selected {
    background-color: #ccc;
}

#emotion label {
    display: inline-block;
    cursor: pointer;
}

#emotion label img {
    padding: 3px;
}

Nun zum JavaScript: 

$('#emotion input:radio').addClass('input_hidden');
$('#emotion label').click(function(){
    $(this).addClass('selected').siblings().removeClass('selected');
});

Der Grund, warum wir display: none hier nicht verwenden, ist aus Gründen der Zugänglichkeit. Siehe: http://www.jsfiddle.net/yijiang/Zgh24/1 für eine Live-Demo mit etwas mehr Phantasie. 

66
Yi Jiang

Sie können CSS3 dazu nutzen, indem Sie das Optionsfeld by-default mit CSS3-Regeln verstecken:

.class-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

Und dann verwenden Sie Etiketten für Bilder als die folgenden Demos:

JSFiddle Demo 1

From top to bottom: Unfocused, MasterCard Selected, Visa Selected, Mastercard hovered

JSFiddle Demo 2

Visa selected

Gist - Bilder für Optionsfelder verwenden

29
Richard Cotrina

Hier ist eine reine HTML + CSS-Lösung.

HTML:

<div class="image-radio">
  <input type="radio" value="true" checked="checked" name="ice_cream" id="ice_cream_Vanilla">
  <label for="ice_cream_Vanilla">Vanilla</label>
  <input type="radio" value="true" name="ice_cream" id="ice_cream_chocolate">
  <label for="ice_cream_chocolate">Chocolate</label>
</div>

SCSS:

  // use an image instead of the native radio widget
.image-radio {   
  input[type=radio] {
    display: none;
  }
  input[type=radio] + label {
    background: asset-url('icons/choice-unchecked.svg') no-repeat left;
    padding-left: 2rem;
  }
  input[type=radio]:checked + label {
    background: asset-url('icons/choice-checked.svg') no-repeat left;
  }
}
3
AlexChaffee

Mit reinem HTML (kein JS) können Sie ein Bild nicht durch einen Optionsschalter ersetzen (zumindest glaube ich nicht). Sie können jedoch Folgendes verwenden, um dieselbe Verbindung zum Benutzer herzustellen:

<form action="" method="post">
    <fieldset>
       <input type="radio" name="feeling" id="feelingSad" value="sad" /><label for="feelingSad"><img src="path/to/sad.png" /></label>
       <label for="feelingHappy"><input type="radio" name="feeling" id="feelingHappy" value="happy" /><img src="path/to/happy.png" /></label>
    </fieldset>
</form>
2
David Thomas

Ich habe einen der vorherigen Beiträge bearbeitet. Jetzt ist es viel einfacher und es funktioniert perfekt.

<input style="position: absolute;left:-9999px;" type="radio" name="emotion" id="sad" />
<label for="sad"><img src="red.gif" style="display: inline-block;cursor: pointer;padding: 3px;" alt="I'm sad" /></label>

<input  style="position: absolute;left:-9999px;" type="radio" name="emotion" id="happy" />
<label for="happy"><img src="blue.gif" style="display: inline-block;cursor: pointer;padding: 3px;" alt="I'm happy" /></label>
1
Can

Bilder können anstelle von Optionsfeldern mit Beschriftungs- und Bereichselementen platziert werden.

   <div class="customize-radio">
        <label>Favourite Smiley</label>
        <br>
        <label for="hahaha">
          <input type="radio" name="smiley" id="hahaha">
          <span class="haha-img"></span>
          HAHAHA
        </label>
        <label for="kiss">
          <input type="radio" name="smiley" id="kiss">
          <span class="kiss-img"></span>
          Kiss
        </label>
        <label for="tongueOut">
          <input type="radio" name="smiley" id="tongueOut">
          <span class="tongueout-img"></span>
          TongueOut
        </label>
    </div>

Optionsfeld sollte ausgeblendet sein,

.customize-radio label > input[type = 'radio'] {
    visibility: hidden;
    position: absolute;
}

Das Bild kann im span-Tag angegeben werden.

.customize-radio label > input[type = 'radio'] ~ span{
    cursor: pointer;
    width: 27px;
    height: 24px;
    display: inline-block;
    background-size: 27px 24px;
    background-repeat: no-repeat;
}
.haha-img {
    background-image: url('hahabefore.png');
}

.kiss-img{
    background-image: url('kissbefore.png');
}
.tongueout-img{
    background-image: url('tongueoutbefore.png');
}

Um das Bild bei einem Klick auf das Optionsfeld zu ändern, fügen Sie dem Eingabe-Tag den aktivierten Status hinzu.

.customize-radio label > input[type = 'radio']:checked ~ span.haha-img{
     background-image: url('haha.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.kiss-img{
    background-image: url('kiss.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.tongueout-img{
        background-image: url('tongueout.png');
}

Wenn Sie Fragen haben, finden Sie unter folgendem Link: Wie ich die Lösung aus dem folgenden Blog genommen habe: http://frontendsupport.blogspot.com/2018/06/cool-radio-buttons-with-images .html

0
Beginner

eine andere Alternative ist die Verwendung eines Formular-Ersetzungsskripts/einer Bibliothek ..__ Sie verdecken normalerweise das ursprüngliche Element und ersetzen sie durch ein div oder span, das Sie nach Belieben gestalten können.

Beispiele sind:

http://customformelements.net (basierend auf Tools) http://www.htmldrive.net/items/show/481/jQuery-UI-Radiobutton-und-Checkbox-Replacement.html

0
Makibo

Sie können keine Optionen wie Optionsfelder, Kontrollkästchen, Bildlaufleisten (usw.) gestalten. Diese sind nativ für das Betriebssystem und den Browser und können nicht manipuliert werden.

Sie können dies jedoch simulieren, indem Sie die Optionsfelder ausblenden und stattdessen nur ein Bild anzeigen.

<input type="radio" style="display: none;" id="sad" /><label for="sad"><img class="sad_image" /></label>
0
Explosion Pills

Verwenden Sie jQuery. Behalten Sie die Checkbox-Elemente im Hintergrund und erstellen Sie eine Liste wie folgt:

<ul id="list">
    <li><a href="javascript:void(0)" id="link1">Happy face</a></li>
    <li><a href="javascript:void(0)" id="link2">Sad face</a></li>
</ul>

<form action="file.php" method="post">
    <!-- More code -->
    <input type="radio" id="option1" name="radio1" value="happy" style="display:none"/>
    <input type="radio" id="option2" name="radio1" value="sad" style="display:none"/>
    <!-- More code -->
</form>

<script type="text/javascript">
$("#list li a").click(function() {
    $('#list .active').removeClass("active");
    var id = this.id;
    var newselect = id.replace('link', 'option');
    $('#'+newselect).attr('checked', true);
    $(this).addClass("active").parent().addClass("active");
    return false;
});
</script>

Dieser Code würde das checked - Attribut zu Ihren Radioeingängen im Hintergrund hinzufügen und den Listenelementen die Klasse active zuweisen. Verwenden Sie natürlich keine Inline-Stile. Vergessen Sie nicht, jQuery mit einzuschließen. Nach dem Anpassen sollte alles aus dem Lieferumfang herausfallen.

Prost!

0
Claudiu

Angesichts des gleichen Problems erstellte ich ein einfaches jQuery-Plugin http://xypaul.github.io/radioimg.js/

Es funktioniert mit ausgeblendeten Optionsfeldern und Beschriftungen, die Bilder enthalten (siehe unten).

<input type="radio" style="display: none;" id="a" />
<label for="a">
   <img class="" />
</label>
0
Paul