Partage
  • Partager sur Facebook
  • Partager sur Twitter

comment changer l'aspect d'un bouton radio

comment changer l'aspect d'un bouton radio

    5 octobre 2017 à 21:27:08

    Bonjour j'ai un bouton radio et je veux le modifier avec css pour qu'il devient comme celui ci exactement

    http://visitpetra.jo/

    Merci d'avance pour votre aide

    • Partager sur Facebook
    • Partager sur Twitter
    Merci d'avance pour votre réponse rapide et pour votre explication
      5 octobre 2017 à 22:08:16

      Bonjour,

      ce ne sont pas des boutons radio sur le site visitpetra.jo,
      utilise l'inspecteur web et tu verras comment faire pareil

      • Partager sur Facebook
      • Partager sur Twitter
        8 octobre 2017 à 16:28:10

        Je n'ai pas su

        Aidez Moi s'il vous plait

        • Partager sur Facebook
        • Partager sur Twitter
        Merci d'avance pour votre réponse rapide et pour votre explication
          8 octobre 2017 à 18:13:01

          il s'agit du module FSVS - Full Screen Vertical Scroller :

          https://github.com/lukesnowden/FSVS

          Avec l'inspecteur web, les pseudo boutons radio sont ainsi (j'ai enlevé les styles ajoutés à la balise <ul>, c'est le JS qui crée ces éléments avec leurs styles dans la balise) :

          <ul id="fsvs-pagination">
          	<li class="pagination-link active">
          		<span style="transition: all 1.5s;">
          			<span style="transition: all 1.5s;"></span>
          		</span>
          	</li>
          	<li class="pagination-link">
          		<span style="transition: all 1.5s;">
          			<span style="transition: all 1.5s;"></span>
          		</span>
          	</li>
          	<li class="pagination-link">
          		<span style="transition: all 1.5s;">
          			<span style="transition: all 1.5s;"></span>
          		</span>
          	</li>
          	<li class="pagination-link">
          		<span style="transition: all 1.5s;">
          			<span style="transition: all 1.5s;"></span>
          		</span>
          	</li>
          </ul>

          et la partie correspondante de la feuille de style du module :

          html {background:#333;}
          html.fsvs #fsvs-pagination {
          	margin:0;
          	padding: 8px 4px;
          	position: fixed;
          	width: 32px;
          }
          html.fsvs #fsvs-pagination li {
          	 list-style: none;
          	 width: 25px;
          	 height: 25px;
          	 line-height: 25px;
          	 text-align: center;
          	 margin: 0 0 2px 0;
          	 cursor: pointer;
          }
          
          html.fsvs #fsvs-pagination li > span {
          	border-radius: 100%;
          	width: 22px;
          	height: 22px;
          	line-height: 22px;
          	border: 1px solid white;
          	display: block;
          }
          
          html.fsvs #fsvs-pagination li > span > span {
          	border-radius: 100%;
          	width: 12px;
          	height: 12px;
          	line-height: 12px;
          	border: 1px solid white;
          	display: block;
          	margin: 4px;
          }
          
          html.fsvs #fsvs-pagination li.active > span {
          	 border: 1px dashed white;
          }
          
          html.fsvs #fsvs-pagination li.active > span > span {
          	 background: white;
          }
          

          j'ai ajouté une couleur de fond pour voir les cercles blancs

          Il faut ajouter :

          <html class="fsvs">

          pour que la CSS fonctionne, mais on peut écrire autrement, virer le "html" devat les déclarations CSS
          donc pas de boutons radios mais deux spans imbriqués = deux cercles concentriques blancs

           


          • Partager sur Facebook
          • Partager sur Twitter
            9 octobre 2017 à 9:36:23

            Bonjour

            Merci pour votre aide

            Mais il faut rajouter le js n'est ce pas?

            Malheureusement je ne code pas en js pouvez vous m'aidez s'il vous plait

            Merci d'avance

            • Partager sur Facebook
            • Partager sur Twitter
            Merci d'avance pour votre réponse rapide et pour votre explication
              9 octobre 2017 à 10:54:36

              Pour afficher les éléments qui ressemblent à des boutons radios, pas besoin de JS, tu as les éléments de la feuille de style,
              que cherches-tu à faire exactement ? des pseudo boutons radio, ok, mais qui font quoi ? qui se comportent comme des boutons radios dans un formulaire ?

              Au départ tu demandais "comment changer l'aspect d'un bouton radio", tu as la réponse

              -
              Edité par ChrisLebure 9 octobre 2017 à 10:56:13

              • Partager sur Facebook
              • Partager sur Twitter
                9 octobre 2017 à 10:59:18

                Bonjour,

                H1800 > quel est ton but final ? Est-ce que tu veux un slider d'images comme sur le site de Petra ou bien c'est juste l'aspect visuel des "boutons radios" que tu cherches à faire ?

                • Partager sur Facebook
                • Partager sur Twitter

                Pas d'aide concernant le code par MP, le forum est là pour ça :)

                  9 octobre 2017 à 13:22:24

                  Bonjour

                  en fait moi je veux faire un scrollbouton comme sur le site de petra je veux avec ces boutons monter et descendre mais le problème dans votre code c'est quand je clic sur les bouton ça ne fonction pas

                  Merci d'avance

                  • Partager sur Facebook
                  • Partager sur Twitter
                  Merci d'avance pour votre réponse rapide et pour votre explication
                    9 octobre 2017 à 13:29:22

                    Donc : tu veux un slider. Va voir le lien de ChrisLebure, tu as toutes les explications sur comment télécharger et activer le plugin JS.

                    • Partager sur Facebook
                    • Partager sur Twitter

                    Pas d'aide concernant le code par MP, le forum est là pour ça :)

                      9 octobre 2017 à 13:30:37

                      ok je vais essayer

                      -
                      Edité par H1800 9 octobre 2017 à 19:47:23

                      • Partager sur Facebook
                      • Partager sur Twitter
                      Merci d'avance pour votre réponse rapide et pour votre explication
                        9 octobre 2017 à 19:50:39

                        Salut

                        je suis H1800 avec un autre compte

                        en fait je veux quand je clic ça marche dans votre code ça ne marche pas

                        Aidez moi et expliquez moi s'il vous plait

                        • Partager sur Facebook
                        • Partager sur Twitter
                          9 octobre 2017 à 20:06:41

                          oui c'est normal, le code CSS que je t'ai donné sert à afficher les pseudo boutons radios, avec en prime l'élément "active" avec le premier cercle en pointillé et le second avec un fond blanc

                          Sinon il faut utiliser le module  FSVS - Full Screen Vertical Scroller

                          • Partager sur Facebook
                          • Partager sur Twitter
                            9 octobre 2017 à 21:22:41

                            et comment faire?

                            je ne comprend pas trop dans le css

                            • Partager sur Facebook
                            • Partager sur Twitter
                            Merci d'avance pour votre réponse rapide et pour votre explication
                              10 octobre 2017 à 9:28:07

                              H1800 a écrit:

                              et comment faire?

                              je ne comprend pas trop dans le css


                              Peut être devrai tu oublier le web et sa programmation?

                              Tu ne fais visiblement aucun effort pour comprendre ni même chercher ce que les utilisateur te demande. Tu n'exprimes en plus clairement pas ton besoin, difficile de t'aider plus que ce qu'on fait les autres.

                              Tu as tout en main, maintenant débrouille toi, et reviens poster quand tu aura fait quelque chose.

                              • Partager sur Facebook
                              • Partager sur Twitter

                              Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

                                10 octobre 2017 à 11:08:38

                                Hello,

                                Je suis en accord avec mon VDD, manque de recherche aussi. L'Anglais fait lui aussi parti du minimum requis dans le développement.

                                Si tu tapes juste "custom radio button" tu obtiens des dizaines d'articles et codes...

                                ex en css -> https://codepen.io/manabox/pen/raQmpL   

                                • Partager sur Facebook
                                • Partager sur Twitter
                                  10 octobre 2017 à 14:08:36

                                  Salut

                                  oui j'ai compris

                                  Mais dans votre dernier code Lucky13

                                  je veux quand le bouton est coché les bordures deviennent dashed

                                  J'espère que vous m'aidez

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                  Merci d'avance pour votre réponse rapide et pour votre explication
                                    10 octobre 2017 à 14:15:35

                                    > oui j'ai compris

                                    > je veux quand le bouton est coché les bordures deviennent dashed

                                    Non, tu n'as pas compris… Essaie des trucs, teste, improvise ! Et recherche aussi un peu autour de toi. Lis des tutos - par exemple le cours HTML5/CSS3 d'OpenClassrooms, qui donne de bonnes bases.

                                    Tu n'es pas un oisillon qui est incapable de voler et qu'on doit nourrir dans le bec :)

                                    • Partager sur Facebook
                                    • Partager sur Twitter

                                    Pas d'aide concernant le code par MP, le forum est là pour ça :)

                                      10 octobre 2017 à 18:13:41

                                      Avant que j'ai venu ici j'ai cherché

                                      et j'ai testé et maintenant que je n'ai pas trouvé la réponse je viens pou que vous m'aidiez

                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                      Merci d'avance pour votre réponse rapide et pour votre explication

                                      comment changer l'aspect d'un bouton radio

                                      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                      • Editeur
                                      • Markdown