Comment style désactivé bouton radio?

J'ai un ensemble de boutons radio dans une cellule de tableau. Le tableau de la cellule de la couleur d'arrière-plan diffère de la page d'arrière-plan.

Basée sur une autre entrée, j'ai parfois de désactiver un ou plusieurs boutons radio. Lorsqu'elle est désactivée, l'intérieur du bouton radio assume la cellule de la table de l'arrière-plan. Le cercle de coloration gris un peu. Cette combine pour faire le bouton ressembler à elle a "disparu". Une observation plus fine montre qu'il reste là.

J'ai eu du mal à définir un CSS entrée pour modifier l'apparence des personnes handicapées bouton radio... peut-il être fait? Actuellement, je suis en train de faire quelque chose comme ceci:

.radio {
    background-color: #FFFFFF;
}

.radio:disabled {
    background-color: #FFFFFF;
}

Vais-je avoir recours à des images?

Mise à JOUR Ce n'est pas le fond du problème, mais l'intérieur du bouton. Lorsqu'elle est désactivée, l'intérieur de la touche de la couleur de fond de la cellule du tableau... ooh, voici une idée. - Je changer à la fois la cellule du tableau et le bouton radio.

OriginalL'auteur Terry G Lorber | 2010-06-24

css radio-button

6

Vous pouvez utiliser le Attribut CSS sélecteur [attributename] pour cela.
```
.radio[disabled] {
    background-color: #FFFFFF;
}
```
Juste pour mentionner que le sélecteur d'attribut ne fonctionnent pas dans IE6, il vaut mieux utiliser une classe spécifique dans le fichier css que vous pouvez ensuite faire référence. De cette façon vous pouvez vous assurer que les personnes handicapées style qui fonctionne pour tous les navigateurs.
Aussi, il est possible qu'un élément "désactivé" attribut, mais pour sa valeur d'être false.
Je ne m'inquiète pas sur IE6 plus wrt non-fonctionnelles des questions 😉 @Pointu: j'ai le code HTML dans l'esprit, pas le XHTML. Sa valeur peut btw également être disabled, c'est à dire disabled="disabled". Quoi de plus ennuyeux, que XHTML 😉
-1 vote cause la solution ne fonctionne pas. Pas en mesure de modifier la couleur de fond d'un handicapé bouton radio. Testé sur Firefox et Chrome.
fonctionne très bien sur Firefox 61 vous pouvez également mettre en cascade les attributs: input[type="radio"][disabled]{ cursor: not-allowed; }

OriginalL'auteur BalusC

Peut-être une solution n'est pas de désactiver quoi que ce soit et

Modifier l'opacité
De capturer des événements et de mettre en œuvre votre propre comportement

Quelque chose comme:

<input type="radio" name="i1" class="enabledinput" />

dans votre css écrire:

.disabledinput {
  opacity: 0.4;
  filter: alpha(opacity=40); /* For IE8 and earlier */
}
.enabledinput {
  opacity: 1;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}

et puis par exemple si vous utilisez jquery en javascript de votre écriture:

$(".enabledinput").each(function(i,obj) {
   $(obj).click(function(evt) {
      $(obj).removeClass("enabledinput");
      $(obj).addClass("disabledinput");
      /*do something here*/
   });
});

vous pouvez modifier votre réponse, au lieu de les supprimer
désolé... je tought il n'a pas été envoyé

OriginalL'auteur jlbofh

0

Essayez de l'ajouter à la frontière de la couleur, car je crois que c'est le bord initial style.
```
border-color #ffffff;
```
Vous pouvez aussi définir la frontière de ne pas avoir de bord de style.
```
border: 0px solid #ffffff;
```
Ou quelque chose le long de ces lignes!

OriginalL'auteur RobertPitt
0

Remplacer avec des images de fond.

OriginalL'auteur reisio

Un moyen facile de modifier le style d'une désactivé bouton radio est absolue simple placé de superposition avec l' :après attribut. Vous pouvez régler la couleur de fond et des bordures que vous voyez l'ajustement.

input[disabled] {

  position: relative;
  height:15px;
  width: 15px;
  box-sizing: border-box;
  margin: 0;
  &:after {
    position: absolute;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color:red;

  }
}

voici un exemple stylo https://codepen.io/Cuberic/pen/PmQoVd

OriginalL'auteur Cuberic

Vous devez vous connecter pour publier un commentaire.