Jump to content
Serial

Style CSS bouton radio input

Recommended Posts

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 by Serial (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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...

Capture.PNG

Edited by Serial (see edit history)

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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).

not_uniform.PNG

uniform.PNG

Edited by Serial (see edit history)

Share this post


Link to post
Share on other sites

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();
}

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Serial (see edit history)

Share this post


Link to post
Share on other sites

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

image.png.ff40d051d9a29e6e6392134402afca36.png

Share this post


Link to post
Share on other sites

Bonjour,

Merci pour les pistes @Eolia, je tourne en rond depuis 1 heure.

La sélection de la déclinaison dans ta démo c'est un module à toi ?

 

Share this post


Link to post
Share on other sites

Non je pensais que les boutons se grisaient quand la déclinaison n'était pas en stock. 

Mais ce n'est pas le cas. 

La barre sur la taille 38 m'a induit en erreur.

Share this post


Link to post
Share on other sites

Dans tous les cas, encore merci pour les pistes mon problème est réglé.
 

https://www.esprit-equitation.com/selle-cuir/188-kit-selle-de-cheval-mixte-debutant.html

 

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites
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 by Zkipounet (see edit history)

Share this post


Link to post
Share on other sites

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 by Zkipounet (see edit history)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More