Style CSS bouton radio input

[Serial]

Bonjour,

Je n'arrive pas à définir un style pour mes boutons radio.

Voici mon template : 

<div class="finitions">
  				<input type="radio" name="finition" value="1" checked/><label class="finition">Test</label>
  				<input type="radio" name="finition" value="2" /><label class="finition">Test 2</label>
</div>

J'aimerai donc ensuite, sur l'option cochée, encadré le label en rouge par exemple.

Mon CSS :

.finitions input[type=radio]:checked + label {
    border: 2px solid red!important;
}

Impossible, ca ne fonctionne pas... 

Edited February 22, 2018 by Serial (see edit history)

[Eolia]

Bon déjà, les !important, on oublie c'est pour ceux qui ne connaissent pas le css

Ensuite, il y a de fortes chances que votre thème utilise uniform.js qui ré-écrit les inputs, donc ajoutez la classe "comparator" ou "not_uniform" à votre bouton radio et re-essayez

[Serial]

J'ai enlevé le !important et ajouté dans mon input la classe "not_uniform" mais pas de changements.

<DIV class="finitions">
  				<INPUT class="not_uniform" type="radio" name="finition" value="1" checked/><LABEL class="finition">Test</LABEL>
  				<INPUT class="not_uniform" type="radio" name="finition" value="2" /><LABEL class="finition">Test 2</LABEL>
</DIV>

Lorsque je charge la page, je vois mon bord rouge apparaître mais il disparaît ensuite.

[Eolia]

essayez avec comparator, c'est dans le plugin alors que not_uniform est dans le thème par défaut et pas forcément dans le votre

[Serial]

J'ai essayé aussi, pareil.

J'utilise pourtant le thème par défaut de PS 1.6.

Edited February 22, 2018 by Serial (see edit history)

[Eolia]

une url où l'on peut voir le problème ?

[Serial]

C'est mon site en local :/

 

Si tu veux plus d'infos je peux t'envoyer les fichiers etc... (c'est un module que je développe).

[Eolia]

screen de la console  (F12) sur l'élement stp 

[Serial]

Et voici

[Eolia]

Ok donc déjà, uniform n'est pas appelé

Essayez

.checked input[type=radio]:checked > label {
    border: 2px solid red!important;
}

Mais la ligne concernant le label m'aurait plus servi...

[Serial]

Pas de changements :/

 

[Eolia]

Cadeau^^

http://devcustom.net/public/test-radio.html

[Serial]

Hummm... Ca m'énerve j'ai le bon rendu 1 seconde et après uniform reprend le dessus puisque tu vas le constater sur la copie d'écran

EDIT : Autre chose aussi, dans mon .js j'ai testé cette ligne : 

$("#monchamp, #monchamp2").not('.noUniform').uniform();

Ces 2 champs sont des input de type number, et du coup je peux bien les personnaliser comme je veux. Par contre j'ai ajouté les 2 boutons radios qu'on cherche à personnaliser et eux persistent...

Edited February 23, 2018 by Serial (see edit history)

[Eolia]

comparator est universel normalement, là, ton code js ne sert à rien car il n'empêche pas celui du global de lancer uniform quand même...

 

Curieux qu'uniform n'était pas lancé avant et qu'il le soit maintenant ?

Je t'ai donné un code qui fonctionne, pourquoi ne l'utilise-tu pas ?

[Serial]

C'est ce que j'ai fais, j'ai mis ton code la justement.

J'ai bien ton rendu mais 1 seconde après ca saute.

Est-ce qu'il n'y aurait pas une subtilitée vu que je suis dans mon module ?

16 minutes ago, Eolia said:

comparator est universel normalement, là, ton code js ne sert à rien car il n'empêche pas celui du global de lancer uniform quand même...

J'ai pas l'impression puisque si je l'enlève, mes input deviennent moches et classique regarde les captures (en 1er avec la ligne de code active et en 2ème avec ma ligne commentée).

EDIT : je t'es envoyé par MP une vidéo du bug (j'actualise 2 fois la page sur la vidéo).

Edited February 23, 2018 by Serial (see edit history)

[Eolia]

https://shop.devcustom.net/fr/t-shirts/1-t-shirt-delave-a-manches-courtes-123456789654.html

 

Dans le global.js du thème, ajouter si elle n'y est pas déjà:

function bindUniform()
{
	if (!!$.prototype.uniform)
		$("select.form-control,input[type='radio'],input[type='checkbox']").not(".not_uniform").uniform();
}

Et

$(document).ready(function(){
  bindUniform();
}

 

[Serial]

C'est pareil :/

Je désespère ^^

Edited February 23, 2018 by Serial (see edit history)

[Eolia]

Bah vous avez un autre souci sur votre thème alors.

J'ai installé le code sur une 1.6 et thème par défaut dans mon exemple.

[Serial]

En mettant cette ligne dans mon .js ca fonctionne mais ca m'enlève le uniform sur tout le site :

(function($) {$.fn.uniform = function() {return this;};})(jQuery);

Par contre, entre les deux boutons radios, impossible dans le HTML de voir quel bouton est coché... Est-ce normal ?

Du coup, ce serait bien d'utiliser cette ligne juste pour mes boutons radios :/

Edited February 23, 2018 by Serial (see edit history)

[Eolia]

Je ne comprends pas la question ?

Si vous voulez le voir il faut ajouter du javascript mais je n'en vois pas l'utilité.

Le bouton coché sera dans le POST du form avec son nom et sa valeur

[Eolia]

Tu veux dire pour les délais ?

[Eolia]

Il reste un petit ajustement

 

[Andriano]

Merci pour ces détails maintenant je peux customiser les inputs de prestashop. Merci à toi @Eolia

 

[Zkipounet]

On 2/23/2018 at 11:51 AM, Serial said:

En mettant cette ligne dans mon .js ca fonctionne mais ca m'enlève le uniform sur tout le site :

(function($) {$.fn.uniform = function() {return this;};})(jQuery);

Par contre, entre les deux boutons radios, impossible dans le HTML de voir quel bouton est coché... Est-ce normal ?

Du coup, ce serait bien d'utiliser cette ligne juste pour mes boutons radios 😕

Bonjour à tous, merci beaucoup pour toute cette aide précieuse ! 

@Serial je me retrouve avec exactement le même problème que toi (sur Bootstrap 1.6.1.6), il apparaît puis disparaît en 1 sec. 2 ans plus tard, as-tu par hasard trouvé ce qui clochait ? 🙄

Merci beaucoup !

Edited February 27, 2020 by Zkipounet (see edit history)

[Zkipounet]

Bonjour,

J'ai créé un produit test pour vous donner une idée de ce que ça rend > url

Quelqu'un aurait-il une idée de là où j'ai pu me planter? Merci

Edited March 5, 2020 by Zkipounet (see edit history)