Buon inizio settimana ragazzi. Ho una pagina così composta, che mostra o nasconde, all'occorrenza, i livelli che vanno a comporre un'immagine. Considerando che i valori sono tanti, vorrei passare da checkbox a Select, qualcuno potrebbe fornirmi qualche consiglio?

Questa è la "lavagna", dove vengono mostrati e/o nascosti i livelli:
codice:
      <div class="lavagna">
		  <span><b>SUPERFICIE</b></span><br>
		 <input type="checkbox" checked><span>COVER</span><div><img src="Img/Cover.png" alt=""></div>
         <input type="checkbox"><span>Colore 1</span><div><img src="Superfici/Colore 1.png" alt=""></div>
         <input type="checkbox"><span>Colore 2</span><div><img src="Colore 2.png" alt=""></div>
         </div>
questo è il css che gestisce i livelli:

codice:
      <style>
         .lavagna{
            width: 800px;
            height: 600px;
            position: relative;
            display: inline-block;
            border: 1px solid #ddd;
            border-radius: 4px;
            text-align: center;
            background: silver;
            margin-bottom: 30px;
         }
         .lavagna>div{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 4px;
            opacity: 0;
            visibility: hidden;
            transition: .5s .2s;
         }
         .lavagna>div>img{
            max-width: 100%;
            max-height: 100%;
         }
         .lavagna>input,
         .lavagna>span{
            display: inline-block;
            position: relative;
            top: 100%;
         }
         .lavagna>input{
            margin: 3px 2px 3px 5px;
            width: 30px;
            height: 20px;
            background: #eee;
            border-radius: 3px;
            border: 1px solid #999;
            -webkit-appearance: none;
               -moz-appearance: none;
                 -o-appearance: none;
                    appearance: none;
            cursor: pointer;
         }
         .lavagna>span{
            margin-right: 5px;
            font: 12px sans-serif;
            vertical-align: super;
            cursor: default;
         }
         .lavagna>input:hover{
            background: #9ce;
         }
         .lavagna>input:checked{
            background: #48d;
         }
         .lavagna>input:hover+span+div{
            visibility: visible;
            opacity: .5;
         }
         .lavagna>input:checked+span+div{
            visibility: visible;
            opacity: 1;
         }
      </style>