Image instead of radio button

Question

I'm probably making a small mistake, but I tried to follow the answers to the previously asked questions on the subject.

I'm trying to replace my radio button with an image. The image shows perfectly and I can click the image to select the radio button. But the mark-up won't hide my radio button. It does when I hardcode it in the HTML code, but well... let's not go there!

.radioImg {
  display:inline;
  width:30%;
}
.radioImg input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
.radioImg input[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
.radioImg input[type=radio]:checked + img {
  outline: 2px solid #f00;
}

<form action= "{{ url_for('mechanics') }}" method="POST">
  <fieldset>
    <legend>What type of system do you want?</legend>
    <br />
    <label class="radioImg">
      <input checked="checked" name="system" type="radio" value="type1">
      <img src="static/type1.jpg">
    </label>
    <label class="radioImg">
      <input name="system" type="radio" value="type2">
      <img src="static/type2.jpg">
    </label>
    <label class="radioImg">
      <input name="system" type="radio" value="type3">
      <img src="static/type3.jpg">
    </label>
    <br />
    <br />
    <button type="submit" value="Next">Next</button>
  </fieldset>
</form>

I tried to follow: Use images instead of radio buttons, but the radio buttons still won't hide as you can see:

Your code works completely fine for me. Try using the browser's console to find what is overriding your intended styles. — Maddie, Dec 10 '19 at 08:36

score 1 · Answer 1 · answered Dec 10 '19 at 08:33

The weird thing is that when I try to replicate your problem with your code, I don't run into the same problem. I think you have some extra CSS somewhere affecting your HTML.

.radioImg {
  display: inline;
  width: 30%;
}

.radioImg input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}


/* IMAGE STYLES */

.radioImg input[type=radio]+img {
  cursor: pointer;
}


/* CHECKED STYLES */

.radioImg input[type=radio]:checked+img {
  outline: 2px solid #f00;
}

<form action="{{ url_for('mechanics') }}" method="POST">
  <fieldset>
    <legend>What type of system do you want?</legend>
    <br />
    <label class="radioImg">
        <input checked="checked" name="system" type="radio" value="type1">
        <img src="static/type1.jpg">
    </label>
    <label class="radioImg">
        <input name="system" type="radio" value="type2">
        <img src="static/type2.jpg">
    </label>
    <label class="radioImg">
        <input name="system" type="radio" value="type3">
        <img src="static/type3.jpg">
    </label>
    <br />
    <br />
    <button type="submit" value="Next">Next</button>
  </fieldset>
</form>

The posted lines of CSS are the last lines of my markup file. Shouldn't it override any possible collisions? Or do markup files don't work that way? — Arno Claes, Dec 10 '19 at 08:36
Fortunately not ([more about that over here](https://dev.to/emmawedekind/css-specificity-1kca)). You can check with your browser by right clicking on the element and selecting "inspect element". In the developer window which should show up you can check which lines of your CSS files apply to that specific element. — Douwe de Haan, Dec 10 '19 at 08:38

score 0 · Answer 2 · answered Dec 10 '19 at 08:47

0

Apparently, I should clear my cache every time I change the markup of /static/... files.

answered Dec 10 '19 at 08:47

Arno Claes

167
11

score 0 · Answer 3 · answered Dec 10 '19 at 09:11

0

This is what you were looking for

/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid red;
}

<label>
  <input type="radio" name="test" value="small" checked>
  <img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>

answered Dec 10 '19 at 09:11

Awais

4,752
4
17
40

Yeah, I tried that. The previous code also worked. It was merely a matter of caching. When I emptied my browser cache, the problem disappeared. – Arno Claes Dec 10 '19 at 14:01
Happy to see taht you problem is solved by yourself as a best teacher. Cheers – Awais Dec 10 '19 at 16:28

Image instead of radio button

3 Answers3