Impossible de customiser les cases radio

[syl-20]

Bonjour à tous,

Toutes mes tentatives pour customiser les boutons radio (ou checkbox rondes) ont plus ou moins échoué.
J'ai suivi toutes les méthodes possibles et rien n'y fait : faire disparaître le input[type="radio"], en l'effaçant ou en l'envoyant à perpète, pour mieux le recréer avec son label comme c'est expliqué plein de fois sur le web, ça n'a pas marché. Annuler la propriété appearance sous -moz-, -webkit-, -o- et -ms-, voire même modifier les valeurs de box-shadow, border, background, etc, en css3, 2, 1, 0... Rien. Soit mes cases disparaissent mais ne réaparaissent pas du tout, soit elles ne disparaissent pas et seule leur taille change, j'ai toujours ce fond blanc, cette bordure et cette ombre interne pas belle...
Alors puisque tout le monde sur le web semble content des méthodes proposées, je me dis qu'il y a quelque chose de spécial dans mon site qui empêche les codes de s'appliquer. Est-ce que c'est parce que j'utilise Gantry 5 et que le bootstrap modifie les classes ? Est-ce que c'est parce que je n'ai accès qu'au CSS (via un fichier custom.scss) et que je ne peux pas modifier le code html pour le faire coller aux techniques ? J'ai pourtant Firebug ouvert en permanence pour vérifier...
Le pire c'est que je ne peux pas vous montrer le site, qui est en local.
Mais je me dis qu'on sait jamais, peut-être que quelqu'un aurait une idée ou déjà rencontré le même genre de souci ?
Merci d'avance et cdlt.

[lefabdu51]

Re : Impossible de customiser les cases radio

que cherches tu a s faire exactement ?
peut tu poster le code html de forebug concernant le champ que tu veut modifier?

[syl-20]

Re : Impossible de customiser les cases radio

Je veux changer ces horribles boutons radio :



qui correspondent à la classe input[type="radio"], si je ne m'abuse.

[lefabdu51]

Re : Impossible de customiser les cases radio

Je veux changer ces horribles boutons radio :

[ATTACH=CONFIG]31239[/ATTACH]

qui correspondent à la classe input[type="radio"], si je ne m'abuse.

Passe en mode editeur avancé piece jointe invalide.
Peut tu aussi poster le code de firebug correspondant ?

[syl-20]

Re : Impossible de customiser les cases radio

Il s'agit donc de :



Et les codes Firebug correspondants (j'ai supprimé les mentions overridées/barrées) :

HTML :

<input id="option-value-20" type="radio" onchange="doAjaxFilter( this.value, 9, 9, '#option-9' );" value="20" name="product_option[9]">

CSS :

.options input[type="radio"], .options input[type="checkbox"], .options select {
    display: inline-block;
}
input[type="radio"] {
    -moz-appearance: none;
    background-color: #292321;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    height: 13px;
    margin: 4px 4px 4px 0;
    vertical-align: middle;
    width: 13px;
}
.platform-content input {
    box-sizing: content-box;
}
input[type="radio"], input[type="checkbox"] {
    line-height: normal;
}
input[type="checkbox"], input[type="radio"] {
    padding: 0;
}
}
button, input, select, textarea {
    font-size: 100%;
}
button, input, optgroup, select, textarea {
    color: inherit;
}

[PhilJ]

Re : Impossible de customiser les cases radio

Je veux changer ces horribles boutons radio qui correspondent à la classe input[type="radio"], si je ne m'abuse.

En effet, mais, sauf erreur, l'aspect des boutons radios diffère selon le navigateur, sa version, et même le système d'exploitation. => Avez-vous essayé avec différents navigateurs et différents ordinateurs ?

[syl-20]

Re : Impossible de customiser les cases radio

Non, mais comme je souhaite que mes boutons soient les mêmes sous tous les navigateurs, je ne vois pas bien l'intérêt d'en tester d'autres. Par contre j'ai essayé les préfixes -moz- et -webkit- devant toutes mes propriétés css, et moi qui suis pourtant sous Firefox, ça n'a pas marché.
Ce que je vois, c'est que quasiment tous les sites (notamment pro) sur le web ont des cases déroulantes, des checkbox et des boutons radio parfaitement personnalisés, et donc que ça ne doit pas être impossible ? (Sans parler de toutes les méthodes décrites sur le web, mais qui ne marchent pas chez moi...)

[jisse03]

Re : Impossible de customiser les cases radio

Bonjour,

http://code.stephenmorley.org/html-a...radio-buttons/ montre une technique pour styliser de manière compatible tous navigateurs les radio et check boxes

[syl-20]

Re : Impossible de customiser les cases radio

Merci Jisse, ça a l'air top ! Mais malheureusement ça ne marche pas chez moi (les radios ont simplement disparu).
Donc c'est bien ce que je pense : peu importe la méthode, il y a quelque chose qui cloche de mon côté.
Ce que je crois, c'est que je suis incapable de déclarer les éléments html qui collent avec les classes css.
Avant Joomla 3 et Gantry 5 c'était simple : je travaillais avec mon template.css ouvert à côté de mon index.html/php, mais avec Gantry je ne sais pas comment modifier le html ! (T'as qu'à pas utiliser Gantry, me direz-vous. Oui mais pour ce dernier site je n'ai pas eu le temps d'apprendre à créer un template Joomla 3 de A à Z, beaucoup de choses ont évolué/changé, donc Gantry m'a mâché le boulot...)

Donc sauriez-vous comment modifier le html d'un site produit sous Gantry 5, afin que je déclare les bons codes html relatifs aux checkbox/radios ?

Merci encore

[jisse03]

Re : Impossible de customiser les cases radio

Pour Gantry, je n'en ai aucune idée, j'utilise surtout le framework YJSG, qui est parfaitement documenté à ce niveau et accepte sans problème le styling CSS3

[syl-20]

Re : Impossible de customiser les cases radio

Je suis tenté mais nooonnn, vade retro ! Je préfère garder mes bêtes boutons radio, tant pis.

[lefabdu51]

Re : Impossible de customiser les cases radio

a tu regardé dans l'onglet typography du framework gantry ?
il sebmle que tu as des éléments de solutions....
dernier point : au tu posé la questions aux dev du framework ?
ils seraient les plus a meme de te donner une solution.

[syl-20]

Re : Impossible de customiser les cases radio

Merci Fab, je vais faire ce que tu conseilles. A force de chercher partout pendant des jours on en oublie les choses simples