Visualizzazione dei risultati da 1 a 3 su 3

Discussione: Da checkbox a select

  1. #1
    Utente di HTML.it L'avatar di dwb
    Registrato dal
    Mar 2001
    residenza
    My IDE! :)
    Messaggi
    2,809

    Da checkbox a select

    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>
    ~Il nome di una variabile deve riflettere il suo scopo e non il suo tipo di dati, NET Framework.

  2. #2
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,174
    non si capisce molto bene cosa vuoi realizzare.....
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


  3. #3
    Utente di HTML.it L'avatar di dwb
    Registrato dal
    Mar 2001
    residenza
    My IDE! :)
    Messaggi
    2,809
    I valori che attualmente mostro tramite checkbox, li vorrei visualizzare in una Select, lasciando però il comportamento invariato.
    ~Il nome di una variabile deve riflettere il suo scopo e non il suo tipo di dati, NET Framework.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.