Impossible de customiser les cases radio

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Impossible de customiser les cases radio

    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.

  • #2
    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?

    Commentaire


    • #3
      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.

      Commentaire


      • #4
        Re : Impossible de customiser les cases radio

        Envoyé par syl-20 Voir le message
        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 ?

        Commentaire


        • #5
          Re : Impossible de customiser les cases radio

          Il s'agit donc de :

          Cliquez sur l'image pour l'afficher en taille normale

Nom : boutons-radio.jpg 
Affichages : 1 
Taille : 11,3 Ko 
ID : 1805340

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

          HTML :
          Code HTML:
          <input id="option-value-20" type="radio" onchange="doAjaxFilter( this.value, 9, 9, '#option-9' );" value="20" name="product_option[9]">
          CSS :
          Code HTML:
          .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;
          }

          Commentaire


          • #6
            Re : Impossible de customiser les cases radio

            Envoyé par syl-20 Voir le message
            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 ?
            Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

            Commentaire


            • #7
              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...)
              Dernière édition par syl-20 à 22/01/2016, 19h10

              Commentaire


              • #8
                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
                Pas de demande de support par MP.
                S'il n'y a pas de solution, c'est qu'il n'y a pas de problème (Devise Shadok)

                Commentaire


                • #9
                  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

                  Commentaire


                  • #10
                    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
                    Pas de demande de support par MP.
                    S'il n'y a pas de solution, c'est qu'il n'y a pas de problème (Devise Shadok)

                    Commentaire


                    • #11
                      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.

                      Commentaire


                      • #12
                        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.

                        Commentaire


                        • #13
                          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

                          Commentaire

                          Annonce

                          Réduire
                          Aucune annonce pour le moment.

                          Partenaire de l'association

                          Réduire

                          Hébergeur Web PlanetHoster
                          Travaille ...
                          X