bonjour,

j'ai un boutton radio de ce tye:

<div class="row">
                <span class='who'>Je suis</span>

                <label for="r3" class='radio'>
                  <input type="radio" id="r3" name="je_recherche" value="Homme">
                  <span class='boy'></span>
                </label>            
                <label for="r4" class='radio'>
                  <input type="radio" id="r4" name="je_recherche" value="Femme">
                  <span class='girl'></span>
                </label>
              </div>

je souhaiterais qu'un des deux soit sélectionné automatiquement, j'ai essayé avec checked ou selected mais ça fonctionne pas

voici mon css

input[type="radio"] {
  display: none !important;
}

.radio {
  font-size: 14px;
  display: inline-block;
  margin-left: 10px;
}
.radio:first-of-type {
  margin-right: 0;
}

.radio span {
  display: inline-block;
  width: 30px;
  height: 39px;
  margin: 1px 10px 0 0;
  vertical-align: middle;
  background: url('../images/boy.png') no-repeat 0 0;
  cursor: pointer;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}
.radio span.girl {
  width: 16px;
  background: url('../images/girl.png') no-repeat 0 0;
}
label.error {
  right: 10px;
  color: #f40e63;
  position: absolute;
  margin-top: -32px;
}

voici le type d'image utilisé:

si quelq'un avais une idée il faudrais qu'il puisse $etre sélectionné et ne pouvant pas être modifié

Bonjour,

un bouton radio est coché avec "checked" en effet, tu n'as pas dû tester correctement ^^.

Et sinon, si tu ne veux pas que ça soit modifiable, pourquoi en faire un input ?

Bonjour,

Peut-être rien à voir, mais attention aux display: none;

input[type="radio"] {
  position: absolute;
  left: -999em;
}

David

avec checked ça ne change rie

<!-- Begin of  .row --> 
              <div class="row">
                <span class='who'>Je suis</span>

                <label for="r3" class="radio">
                  <input type="radio" id="r3" name="je_recherche" value="Homme" checked="checked">
                  <span class="boy"></span>
                </label>            
                <label for="r4" class="radio">
                  <input type="radio" id="r4" name="je_recherche" value="Femme">
                  <span class="girl"></span>
                </label>
              </div>
              <!-- End of .row  -->

par contre j'ai aussi une fonction javascript que voici:

//radio button script
  $('.radio').click(function(){
    if($(this).children('input:checked')) {
      $(this).children('span').css('background-position', '0 -39px');
      $(this).siblings('.radio').children('span').css('background-position', '0 0');
    }
  });

Pas besoin de JS pour ça, utilise input:checked + span en CSS

Est-ce que tu peux mettre une version en ligne ?