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>