CSS pour boutons radios.

durtom
Topic Author
Offline

6 years 3 months ago - 6 years 3 months ago #321175 by durtom

CSS pour boutons radios. was created by durtom

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

Last edit: 6 years 3 months ago by durtom.

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

durtom
Topic Author
Offline

6 years 3 months ago - 6 years 3 months ago #321176 by durtom

Replied by durtom on topic CSS pour boutons radios.

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

EDIT : ce code CSS ne fonctionne pas :

Code:

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

Last edit: 6 years 3 months ago by durtom.

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

Philip
Offline

6 years 3 months ago - 6 years 3 months ago #321189 by Philip

Replied by Philip on topic CSS pour boutons radios.

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 :

Code:

<label for="hikashop_product_characteristic_741735" id="hikashop_product_characteristic_741735-lbl" class="radio" onclick="your_function(hikashop_product_characteristic_741735-lbl)">
    <input>
        ...

Javascript :

Code:

<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: 6 years 3 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.166 seconds