Creazione dropdown list box

di ytreka il
7 risposte
Utente Attivo
Iscritto da
nov, 2019
Messaggi
72
Salve a tutti, ho come compito quello di creare un form per un sito web di fantasia. Vorrei inserire in esso 3 drop down list box...ed effettivamente sono riuscito a farlo, il problema è che le opzioni del menù a tendina sono tutte visibili. Ho visto vari tutorial sui menù a tendina, ma costruiscono il menù in maniera diversa: cioè con <ul> e <li>, nonostante provi ad integrare le due cose, aggiungendo, per quanto riguarda i CSS, display:none, il risultato non cambia. Come posso fare in modo che le opzioni vengano visualizzate solo cliccando il pulsante del menù? Grazie in anticipo a chi mi aiuterà...ecco una porzione di codice: 
 <li>Scegli tipo di abbonamento </li>
        <ul>
            <select size="3"required>
            <li> <option class="voci" value="num1">Num1</option></li>
            <li> <option class="voci" value="num2">Num2</option></li>
            <li> <option class="voci" value="num3">Num3</option></li>
            </select>
     </ul>

7 Risposte

  • /
    Anonimizzato24191
    Utente anonimizzato
    No, hai mescolato un po di tag, ti consiglio di ripassare la parte riguardanti i campi dei form

    per fare una select list si fa così:
    <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
  • Utente Attivo
    Iscritto da
    nov, 2019
    Messaggi
    72
    Facendo così il problema è che mi visualizza tutte le opzioni.
  • /
    Anonimizzato24191
    Utente anonimizzato
    E allora molto probabilmente hai sbagliato qualche regola in css.
    Puoi postare sia il css che l'html, così vediamo?
  • Utente Attivo
    Iscritto da
    nov, 2019
    Messaggi
    72
    Questo è il codice html 
    <p>Scegli tipo di abbonamento </p>
            <select class="dropdown" size="3" required>
            <option class="voci" value="num1">Num1</option>
            <option class="voci" value="num2">Num2</option>
            <option class="voci" value="num3">Num3</option>
            </select>
    Questo il relativo css delle classi "dropdown" e "voci" 
     .dropdown:hover {
    background-color: white;
    display: block;
    
}
.dropdown {
    position: absolute;
    background-color: lightgrey;
    min-width: 20px;
    }
    .voci {
  display: block;
    
}
    Ho provato varie configurazioni, evidentemente sbagliate anche quelle. E' la prima volta che lavoro con html e css e mi sto trovando molto in difficoltà, anche considerando il fatto che non so dove studiare le nozioni principali di css.
  • /
    Anonimizzato24191
    Utente anonimizzato
    Ok, ho capito.
    è il "size="3" che permette di decidere quanti elementi visualizzare, se lo togli, vedrai che funziona
  • Utente Attivo
    Iscritto da
    nov, 2019
    Messaggi
    72
    Perfetto Stavo impazzendo per una cosuccia del genere...Grazie mille ! Ma sai dove posso trovare una guida che mi faccia capire meglio come funzionano tutti gli attributi di css? Sono importantissimi, ma sono anche una valanga.
  • /
    Anonimizzato24191
    Utente anonimizzato
    Guarda, io 15 anni fa avevo studiato l'html su html.it, ma ti consiglio di prenderti un libro, così almeno ce l'hai sempre sottomano se serve.

    te ne lascio alcuni che consiglio sempre:






Devi accedere o registrarti per scrivere nel forum
7 risposte