ajout d'une image ou icon de type check valide sur une image presente dans un label

**JackSteller** · 22/04/2019, 20h25

Bonjour la communauté,

J'ai 5 inputs de type radio auquel j'ai associé un label qui contient une image donc en gros les inputs sont caché et l'image et cliquable (gérer cela en JS).

maintenant je voudrais ajouter a ce même clic une image check valide (fa -fa-check par exemple) par dessus .j'ai fais un fonction ou j'arrive a mettre un outline autour des images sélectionné mais impossible de mettre une image par dessus c'est décaler ou alors je m'y prend mal.

merci de votre aide.

mon label généré dynamiquement ci-contre fichier twig/html

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="col-6">
 
                            <div class="label-div" style="width: 450px;">
                                {% for i in 1..10 %}
 
                                <label for="scale{{question.id}}for{{i}}" style="margin:3px;"><img src="{{asset('images/survey/'~ i ~'.jpg')}}"></label>
                                <input type="radio" class="radio-pict" name="{{question.id}}"id="scale{{question.id}}for{{i}}" value="{{i}}">
 
                                {% endfor %}
 
                            </div>
 
                        </div>

ici ma fonction js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$('.label-div [type="radio"]').click('change', function () {
            $(this)
                .prev().addClass('selected')
                .siblings().removeClass('selected');
        });

et enfin mon

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.selected{
 
outline: outset #84898b;
 
 }

Invité · 23/04/2019, 12h34

Bonjour,

c'est purement du CSS.
(je déplace la discussion dans le forum CSS)

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.selected {
  position:relative;
  outline: outset #84898b;
}
.selected:after {
  position:absolute;
  top:0;
  right:2px;
 
  font-family:"FontAwesome"; /* font-awesome 4 */
  content:'\f00c'; /* code de l icone */
  color:green;
  font-size:100%;
}