J'essaie HTML et CSS et suis relativement nouveau dans l'ensemble du concept. Je travaille actuellement sur le style d'une case à cocher personnalisée à l'aide d'une image que j'ai créée à partir de Photoshop. Je ne suis pas en mesure de comprendre pourquoi mon image n'apparaît pas lorsque je la règle de cette façon.

HTML

<ul id="myUL" class="ulChecklist">
  <form action="/action_page.php">                   
    <li><input type="checkbox" name="instruction">
      <label for="Step1">Step 1</label>
    </li>
    <li><input type="checkbox" name="instruction">
      <label for="Step2">Step 2</label>                    
    </li>
    <li><input type="checkbox" name="instruction">
      <label for="Step3">Step 3</label>                    
    </li>
  </form>
</ul>

CSS

input[type="checkbox"] {
opacity: 0;
}

input[type="checkbox"] + label {
background: url(check.png) left center no-repeat;
}

C'est l'image pré-vérifiée que je souhaite ajouter. Vérifier l'image que je veux ajouter

C'est l'image post-vérifiée que je souhaite ajouter. C'est l'image post-vérifiée que je veux ajouter.

Comme vous pouvez le voir, il n'apparaît pas. entrez la description de l'image ici

Quelque chose ne va pas avec la façon dont j'écris ces codes? J'ai vérifié le lien du cours Lynda suivant: https://www.lynda.com/HTML-tutorials/Styling-radio-buttons-check-boxes-images/612196/646907-4.html

Mais ça ne marche pas pour moi. J'apprécierais grandement l'aide des gens! Merci d'avoir pris votre temps pour répondre à une question de noob!

1
MechaKondor 15 nov. 2017 à 11:21

4 réponses

Meilleure réponse

Essaye ça.

ul{
  list-style:none;
}
input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

input[type="checkbox"] + label {
  background: url(https://i.stack.imgur.com/eiFBl.png) no-repeat 0 center;
  padding-left:60px;
  line-height:50px;
  display: inline-block;
  cursor:pointer;
}
input[type="checkbox"]:checked + label {
  background: url(https://i.stack.imgur.com/mCst2.png) no-repeat 0 center; 
}
.check-wrap{
  position:relative;
  display: inline-block;
}
<ul id="myUL" class="ulChecklist">
  <form action="/action_page.php">
    <li>
      <div class="check-wrap">
        <input type="checkbox" name="instruction" id="Step1">
        <label for="Step1">Step 1</label>
      </div>
    </li>
    <li>
      <div class="check-wrap">
        <input type="checkbox" name="instruction" id="Step2">
        <label for="Step2">Step 2</label>
      </div>
    </li>
    <li>
      <div class="check-wrap">
        <input type="checkbox" name="instruction" id="Step3">
        <label for="Step3">Step 3</label>
      </div>
    </li>
  </form>
</ul>
5
ankita patel 15 nov. 2017 à 08:33

Vous êtes sur la bonne voie. Juste que vous avez besoin de redimensionner l'image d'arrière-plan et float vers la gauche. Et l'un des éléments les plus importants est d'associer le libellé à la case à cocher d'entrée avec for et id:

input[type="checkbox"] {
opacity: 0;
}

input[type="checkbox"] + label {
background: url(http://www.iconarchive.com/download/i86039/graphicloads/100-flat-2/check-1.ico) left center no-repeat;
float: left;
padding-left: 25px; /*image width plus extra padding */
background-size: 20px 20px;
}

input[type="checkbox"]:checked + label {
background: url(https://d30y9cdsu7xlg0.cloudfront.net/png/2181-200.png) left center no-repeat;
float: left;
padding-left: 25px; /*image width plus extra padding */
background-size: 20px 20px;
}
<ul id="myUL" class="ulChecklist">
  <form action="/action_page.php">                   
    <li><input id="Step1" type="checkbox" name="instruction">
      <label for="Step1">Step 1</label>
    </li>
    <li><input id="Step2" type="checkbox" name="instruction">
      <label for="Step2">Step 2</label>                    
    </li>
    <li><input id="Step3" type="checkbox" name="instruction">
      <label for="Step3">Step 3</label>                    
    </li>
  </form>
</ul>
0
Rust 15 nov. 2017 à 08:40

Le code que vous avez fourni ne prévoit pas l'image d'arrière-plan label lorsque le frère adjacent pseudo-state est :checked.

Vous devrez tenir compte des deux états, par exemple: input[type="checkbox"] & input[type="checkbox"]:checked

input[type="checkbox"] + label {
background: url(check.png) left center no-repeat;
}

input[type="checkbox"]:checked + label {
background: url(check-alt.png) left center no-repeat;
}

Modifier
Vous devrez peut-être également déclarer les propriétés de taille d'arrière-plan.

0
UncaughtTypeError 15 nov. 2017 à 08:40

Désolé, je ne peux pas voir le cours Lynda car je ne suis pas membre, mais je ferai de mon mieux pour y répondre.

Si je configurais, j'apporterais les modifications suivantes à votre code:

<ul id="myUL" class="ulChecklist">
  <form action="/action_page.php">                   
    <li><input type="checkbox" name="instruction">
      <label for="Step1">Step 1</label>
         <img src=“./check.png” class=“checkmark-section”>
    </li>
  </form>
</ul>

Ensuite, dans le CSS, j'appellerais la classe de section de coche et ajouterais l'image d'effet de clic sous la pseudo classe de focus

Par exemple:

.checkmark-section: focus {background: url (./ checkmark-active)

}

Cela signifie qu'une fois que la coche active est cliquée, elle basculera pour afficher l'image de la coche enfoncée à la place. Je n'ai pas essayé cela, mais c'est ainsi que je m'attendrais à ce que cela fonctionne.

Bonne chance,

Dan

-1
Dan Haddock 15 nov. 2017 à 08:40
47302485