CODEWITHSUNDEEP
htmlcss
Jelle Spruyt
Jelle Spruyt

Reputation: 39

Show an image(in a table) with a dropdown (no javascript)

For a project, we have to make a page where users can customize a product. I wanted to achieve this through a dropdown where users can choose their car color. This has proven to be quite hard without the ability to use divs and javascript. The goal is to show a hidden table-cel when a color is selected in the dropdown menu. I've been trying to do this through "option:checked" and "option:active" but it just shows all of the images in the table. Thanks in advance for taking a look :)! 

     .kleur1,.kleur2,.kleur3,.kleur4,.kleur5{
            display: none;
        }
        #kleur1.kleurfilter:checked ~ table,tr,td.kleur1,
        #kleur2.kleurfilter:checked ~table,tr,td.kleur2,
        #kleur3.kleurfilter:checked ~ table,tr,td.kleur3,
        #kleur4.kleurfilter:checked ~ table,tr,td.kleur4,
        #kleur5.kleurfilter:checked ~ table,tr,td.kleur5{
            display: table-cell;
        }
   <main>
    <table>
        <tr class="kleurPerson">
            <td class="kleur1"><img src="../media/customize/rsz_black.jpg" alt="Zwarte mercedes amg gt4"></td>
            <td class="kleur2"><img src="../media/customize/rsz_blue.jpg" alt="Blauwe mercedes amg gt4"></td>
            <td class="kleur3"><img src="../media/customize/rsz_red.jpg" alt="Rode mercedes amg gt4"></td>
            <td class="kleur4"><img src="../media/customize/rsz_white.jpg" alt="Witte mercedes amg gt4"></td>
            <td class="kleur5"><img src="../media/customize/rsz-silver.jpg" alt="Silvere mercedes amg gt4"></td>
        </tr>
    </table>
    <select name="kleur" id="kleur">
        <option class="kleurfilter" id="kleur1" value="Midnight black">Midnight Black</option>
        <option class="kleurfilter" id="kleur2" value="Sky blue">Sky blue</option>
        <option class="kleurfilter" id="kleur3" value="Matte Red">Matte red</option>
        <option class="kleurfilter" id="kleur4" value="Slick white">Slick white</option>
        <option class="kleurfilter" id="kleur5" value="Silver">Silver</option>
    </select>
    <label for="kleur">Mercedes</label>

</main>

Upvotes: 0

Views: 56

Answers (2)

Moob
Moob

Reputation: 16204

It's not possible with the approach you are taking since there is no parent selector in CSS and the table is not a general sibling (~) of the selected option.

If you're happy to restructure your html you can use labels to toggle radio buttons like this messy demo:

.kleur1,
.kleur2,
.kleur3,
.kleur4,
.kleur5 {
  display: none;
}

#kleur1:checked~table td.kleur1,
#kleur2:checked~table td.kleur2,
#kleur3:checked~table td.kleur3,
#kleur4:checked~table td.kleur4,
#kleur5:checked~table td.kleur5 {
  display: table-cell;
}

input[name=kleur] {
  display: none;
}

.options label {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
  border: 1px solid grey;
}

.options label:hover:before {
  display: block;
  content: attr(data-name);
  position: absolute;
  z-index: 1;
  bottom: 50%;
  left: 50%;
  white-space: nowrap;
  padding: 2px;
  background: yellow;
}
<main>
  <input type="radio" name="kleur" id="kleur1" value="1" />
  <input type="radio" name="kleur" id="kleur2" value="2" />
  <input type="radio" name="kleur" id="kleur3" value="3" />
  <input type="radio" name="kleur" id="kleur4" value="4" />
  <input type="radio" name="kleur" id="kleur5" value="5" />
  <table>
    <tr class="kleurPerson">
      <td class="kleur1"><img src="../media/customize/rsz_black.jpg" alt="Zwarte mercedes amg gt4"></td>
      <td class="kleur2"><img src="../media/customize/rsz_blue.jpg" alt="Blauwe mercedes amg gt4"></td>
      <td class="kleur3"><img src="../media/customize/rsz_red.jpg" alt="Rode mercedes amg gt4"></td>
      <td class="kleur4"><img src="../media/customize/rsz_white.jpg" alt="Witte mercedes amg gt4"></td>
      <td class="kleur5"><img src="../media/customize/rsz-silver.jpg" alt="Silvere mercedes amg gt4"></td>
    </tr>
  </table>

  <div class="options">
    <label for="kleur1" style="background:black" data-name="Midnight Black"></label>
    <label for="kleur2" style="background:blue" data-name="Sky blue"></label>
    <label for="kleur3" style="background:red" data-name="Matte red"></label>
    <label for="kleur4" style="background:white" data-name="Slick white"></label>
    <label for="kleur5" style="background:silver" data-name="Silver"></label> Mercedes
  </div>
</main>

P.S. I see no reason for your images to be in a table.

Upvotes: 0

Saksham
Saksham

Reputation: 9390

According to your structure, you cannot do it via pure CSS and HTML as CSS has not parent or backward selector. I have modified the HTML and have used radio buttons to achieve the same in this fiddle

I have used the + immediate sibling selector

Upvotes: 1

Related Questions