Le style d'un bouton radio

J'ai un jQuery dialogue sur deux pages différentes. Pour une raison quelconque, les boutons radio sont différents (une page est du pur HTML/Javascript et l'autre est créé par un cadre interne créé par le client, je travaille pour).

Je suis à essayer de comprendre ce qui à rechercher dans le css qui provoque la différence de bouton radio présentation.

Les deux scénarios ressembler à ceci:

Mal:

Le style d'un bouton radio

Droit:

Le style d'un bouton radio

N'importe qui peut aider avec quelques indices quant à ce que chercher?

Peut-être que je devrais ajouter que les deux photos sont de IE8.

Eh bien la première étape est de toujours vérifier l'généré des DOM et de comparer les deux versions. Si l'égalité, alors vous devez vérifier les styles qui sont appliqués à l'correctes et incorrectes de l'un et de les comparer. Probablement il y a juste une feuille de style manquant, ou une règle remplace un autre.
Aucune idée sur IE8, mais décent navigateurs de fournir un "Inspecter l'élément" menu contextuel où vous pouvez voir le CSS appliquée à l'élément que vous cliquez-droit sur. Cependant, vous êtes probablement censé pour fournir certains de balisage avec certaines attribut de classe.

OriginalL'auteur CJe | 2013-06-12

  1. 9

    Style (EDIT: les frontières, les couleurs, arrière-plan) de un bouton radio elle-même n'est pas possible en css. Mais vous pouvez pirater un peu autour de avec des boutons radio et des images superposées comme décrit ici

    Essentiellement, vous cacher votre bouton radio et de mettre un span droit, à sa place que lorsque l'on clique dessus, de ses changements de style:

    html

    <label><input type="radio"><span class="overlay"></span> radio button</label>

    css

    input[type=radio] {
  opacity: 0;
  z-index: 9999;
}
/* default radio button style: unchecked */
.overlay {
  display: inline-block;
  position: relative;
  left: -1em; /* or whatever length you need here */
  height: 1em;
  width: 1em;
  background-color: red;
}
/* changed style when checked */
input[type=radio]:checked + .overlay {
  background-color: green;
}

    Essayer dans cette jsFiddle

    -1 pour "le style d'un bouton radio elle-même est impossible avec CSS". Tout d'abord, l'article que vous lien montre comment le faire avec du CSS (et donc invalide votre déclaration), la deuxième, c'est plutôt achieveavle, et la troisième, je l'ai fait. Avec les CSS. P. S. "-1" est symbolique, je ne vais pas prendre loin de vous des réponses utiles.
    Ce que je voulais dire, c'est que vous ne pouvez pas changer le background ou border d'un bouton radio: jsfiddle.net/ABQSv. (Si vous le pouvez, j'ai été totalement tort, et avoue tout. Mais montrez-moi.) - Vous sûr que style d'un bouton radio avec de la pure css (comme sa position, l'opacité, peu importe), mais je pense que ce n'était pas la façon dont il devait.
    Fait quelques croix-navigateur vérifie, en effet elle fonctionne en (pré-clignotement) Opera et Internet explorer. Honte sur moi. (Mais ne fonctionne pas sous Firefox/Webkit est une préoccupation majeure je pense...)
    Je crois que j'ai trouvé quelque chose qui se passe grâce à des charges de fichiers css: CSS définition du filtre. J'espère que la suppression de ce sera vous aider. Juste attendre pour le site pour les redéployer.
    Schreiber, vous pouvez modifier arrière-plan et la bordure d'un bouton radio, et à peu près toute autre forme de contrôle. Vous devez appliquer le -webkit-appearance: none règle mais d'abord, qui se débarrasse de tous les style visuel du contrôle. Et bien sûr, cela ne fonctionne que dans les navigateurs Webkit. D'autres navigateurs peuvent avoir leur propre fournisseur de appearance CSS.

    OriginalL'auteur Dominik Schreiber

  2. 1

    Inspectez les deux éléments avec Web Developer Tool. Appuyez sur la touche F12 dans IE8, puis cliquez sur l'icône du curseur en haut à gauche (ou appuyez sur Ctrl+B). Cliquez sur le bouton radio pour l'inspecter.

    Il est recommandé d'utiliser Google Chrome WDT, car il peut vous en dire plus (eg. liées fichier CSS), plus faciles et plus rapides à utiliser. Vous pouvez faire un clic droit sur le bouton radio et cliquez sur "Inspecter l'Élément" pour en voir plus (DOM, CSS).

    FF (dernier) a aussi cette fonctionnalité intégrée (pas de firebug plus requis).
    Merci les gars mais je suis limité à IE8 (je le DÉTESTE!!!) en raison de la politique de l'entreprise.

    OriginalL'auteur Stocki

  3. 1

    J'ai trouvé le coupable:

    <meta name="MSThemeCompatible" content="no">

    Ce bit est dans l'un et pas l'autre. Donc, soit je les supprimer en une page ou l'ajouter à l'autre pour les faire se ressembler.

    OriginalL'auteur CJe

  4. 0

    Style de boutons radio est très limité, en particulier dans les navigateurs plus anciens. J'ai écrit un tutoriel sur la façon de personnaliser les cases à cocher et les radios avec CSS, ainsi que de créer des boutons on/off via le style de l'étiquette et de l'aide c'est :before et :after pseudoclasses. Il a une IE8 secours. Peut-être que cela aide 🙂 Lire ici: http://blog.felixhagspiel.de/index.php/posts/custom-inputs

    OriginalL'auteur Felix Hagspiel