Changement de Couleur de Fond d'un Bouton Radio

Est-il possible de changer la couleur de fond d'un bouton radio d'entrée dans Firefox/Chrome comme dans IE? (Sans l'aide d'images)

Exécuter dans IE(<9) et Firefox/Chrome:

CSS:

input[type="radio"] {
  background: red;
}

HTML:

<input type="radio" /> RadioButton

Vue sur JSFiddle

InformationsquelleAutor vpascoal | 2011-07-12
  1. 1

    Alternativement, il est possible de modifier la frontière à l'aide de CSS.

    C'est l'entrée de la radio:

    <input name="myinput" id="myinput" type="radio" value="1" class="highlighted" />

    Et c'est le CSS:

    .highlighted {
    outline:1px solid #F00; /* Firefox, Opera, Chrome, IE8+ */
    *filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1,color=#FF0000); /* IE6, IE7 */
}
    InformationsquelleAutor Valerio Gentile
  2. 1

    La réponse est "non".

    Même si vous ne parvenez pas à obtenir quelque chose qui fonctionne dans un navigateur, les navigateurs ont tendance à gérer les contrôles de formulaire de manière très différente, le sens qu'il est presque impossible d'atteindre la compatibilité inter-navigateur.

    Décevant, je le sais. Consultez cet article pour plus d'info: http://www.456bereastreet.com/archive/200409/styling_form_controls/

    Juste en passant, pourquoi voulez-vous changer la couleur d'arrière-plan? Généralement un bouton radio de fond de plan: il suffit de choisir la couleur d'arrière-plan de son conteneur.

    InformationsquelleAutor Luke
  3. 0

    Je sais que c'est une vieille question bits il vient encore assez élevé si vous google la question donc, voici ma solution.

    Style un <label> élément qui est directement après le radio bouton.

    HTML

    <input type=radio name="colour" value="green" id="colour-green" /><label for="colour-green" ></label>
<input type=radio name="colour" value="red" id="colour-red" /><label for="colour-red" ></label>
<input type=radio name="colour" value="blue" id="colour-blue" /><label for="colour-blue" ></label>

    CSS

    input[type=radio]{
    display:none;
}
input[type=radio] + label{
    border: 1px solid black;
    background-color: red;
    border-radius: 50%;
    display: block;
    ...
}
input[type=radio]:checked + label{
    background-color: green;
}
    InformationsquelleAutor Jonathan Hodgson
  4. 0

    De changer la couleur de fond d'un bouton radio à l'entrée dans IE

    HTML

    <input type="radio" name="custom">  
<input type="radio" name="custom">

    CSS

    input[type=radio] {
  width: 20px;
  height: 20px;
}
/* This will make the border gray when the button is not checked. */
input[type=radio]:not(:checked)::-ms-check {
  border-color: gray; 
}
input[type=radio]::-ms-check {
  border-color: red; /* This will make the border red when the button is checked. */
  color: red; /* This will make the circle red when the button is checked. */
}
    InformationsquelleAutor tituskalai
  5. -5

    entrée de la radio est juste un cercle, de sorte que vous pouvez changer le style de la < a > ou < div > balise comme ceci:

    Ici

    • Merci pour la réponse! Mais je veux juste changer le fond du bouton radio
    • bouton radio est juste un cercle, il n'y a pas de texte, donc on ne peut pas changer le fond d'elle.
    • Est-ce quelqu'un peut me donner la bonne solution? si non, pourquoi ma réponse 4 en bas de vote... C'est pas juste de dire "la vérité"...
    • Ce qui est vrai. Upvoted.
    InformationsquelleAutor Maidot