CSS pour boutons radios.

  • Posts: 11
  • Thank you received: 1
4 years 5 months ago #321175

Bonjour,

Question assez simple...

Je voudrais avoir des boutons radios sur différents produits, pour que le client puisse choisir sa couleur.



Voici une capture d'écran avec mon curseur qui survole un élément, je voudrais cet encadré noir une fois que le client a cliqué sur la couleur, mais une fois que le client a cliqué et choisis sa couleur, rien n'apparait.



J'ai recherché en vain sur internet la solution à mon problème mais je n'y arrive pas, c'est pourquoi je me tourne vers vous...

Cordialement.

EDIT : lien du problème : www.printlor.fr/etiquettes-et-stickers-a...etiquette-en-planche

Attachments:
Last edit: 4 years 5 months ago by durtom.

Please Log in or Create an account to join the conversation.

  • Posts: 11
  • Thank you received: 1
4 years 5 months ago #321176

Quel ligne de code CSS dois-je ajouter pour résoudre cette problématique?

EDIT : ce code CSS ne fonctionne pas :

.hikashop_filter_checkbox input:checked + label {
    border: 3px solid black;
}

Last edit: 4 years 5 months ago by durtom.

Please Log in or Create an account to join the conversation.

  • Posts: 4747
  • Thank you received: 644
  • MODERATOR
4 years 5 months ago #321189

Bonjour,

D'abord, pour avoir des éléments vous pouvez déjà jeter un oeil a ce tutorial qui vous montre comment ajouter votre css.
Maintenant pour votre demande spécifique il va falloir plus que du Css.
Je pense qu'il va falloir une override de view de votre vue product/show_block_characteristic pour y ajouter du javascript.

Car en l'état pour pouvoir appliqué du Css sur votre valeur sélectionné, il faut y ajouter une class et donc associer à vos label du javascript qui ajouterait une classe (ex : selected).

Dans l'idée cela ressemblerai à cela sur le principe :
html/php :

<label for="hikashop_product_characteristic_741735" id="hikashop_product_characteristic_741735-lbl" class="radio" onclick="your_function(hikashop_product_characteristic_741735-lbl)">
    <input>
        ...
Javascript :
<script>
    your_function(id) {
         var element = document.getElementById(id);
         if element.classList.contains('selected');
             // Remove
             element.classList.remove('selected');
         else
             // Add class
             element.classList.add('selected');
     }
</script>

Then, you will be able to style the label with the class selected.
Hope this will help you to achieved what you need.
regards

Last edit: 4 years 5 months ago by Philip.
The following user(s) said Thank You: durtom

Please Log in or Create an account to join the conversation.

Time to create page: 0.060 seconds
Powered by Kunena Forum