28 CSS-valintaruutua

Kokoelma ilmaisia mukautettuja HTML- ja CSS-valintaruutukoodikoodeja: pudotusvalikko, useita, mukautettu nuoli jne. Päivitys kesäkuun 2018 kokoelmasta. 4 uutta kohdetta.

1. jQuery Select Boxes
2. Bootstrap Multi Select Boxes

Tietoja koodista

Mukautettu valintaruutu

Mukautetun valintaruudun pudotusvalikko.

Yhteensopivat selaimet : Chrome, Edge, Firefox, Opera, Safari

Reagoiva: kyllä

Riippuvuudet: font-awesome.css

Tietoja koodista

Pure CSS Select Box with Direction Aware Hover Effect

Pure CSS select ruutu ilman JavaScriptiä. Kun vaihtoehdon kohdalla on hiiren osoitin, kuvakkeen liike vaihtoehdon sisällä määräytyy leijunnan suunnan eli ylöspäin tai alas osoittavan (suunta huomioiva leijuvaikutus) avulla.

Yhteensopivat selaimet: Chrome, Edge, Firefox, Opera , Safari

Reagoiva: kyllä

Riippuvuudet: font-awesome.css

Tietoja koodista

Pure CSS -valintaruutu

Valintaruutu ilman JavaScriptiä ja natiivielementtiä.

Yhteensopivat selaimet: Chrome , Edge, Firefox, Opera, Safari

Reagoiva: kyllä

Riippuvuudet: –

Tietoja koodista

Reagoiva mukautettu valintaruutu

Reagoiva mukautettu valintaruutu mukautetulla vierityksellä.

Tietoja koodista

Kuvan valinta

Kuvan valinta faux-latauksella.

Tietoja koodista

Toteuta valinta

Toteuta JS-tyylin valinta.

Tietoja koodista

Mukautettu kääre

Mukautettu CSS-valintakääre.

Mukautettu valinta

Mukautettu HTML-, CSS- ja jQuery-valinta.
Alessandro Falchi
5. huhtikuuta 2017

Mukautettu Valitse vaihtoehto n

Mukautettu valinta, joka on suunniteltu muuttamaan selaimen tyypillistä tyyliä. JS näyttää luettelon, kun se napsauttaa, ja SCSS, jotta sille annetaan tyyli. Valittu attribuutti toimii hyvin, testaa se.
Tekijä Dany Santos
8. helmikuuta 2017

Materiaalisuunnittelun pudotusvalikko

Materiaalisuunnittelun avattava valikko HTML-, CSS- ja JavaScript.
Tekijä Sam Murphey
20. tammikuuta 2017

Valitse vaihtoehtovaikutus

Loistava esimerkki puhtaasta animaatiosta. Rakennettu TweenMax GSAP: lla.
Tekijä Bhakti Al Akbar
7. joulukuuta 2016

Valitse laatikot

Valintaruudut, joissa on HTML, CSS ja JS.
Nipun Paradkarin valmistama
lokakuu 22. 2016

CSS-tyylinen ja suodatettava Valitse pudotusvalikko

Valitse pudotusvalikko – tyylistä ja suodatettavissa HTML-, CSS- ja vanilja-JS: llä. Toimii syöttökentän avulla arvon pudottamiseksi luettelosta.
Laatija Mari Johannessen
13. lokakuuta 2016

Vain CSS-valinta

Vain CSS-valinta (radio + valintaruutu).
Tekijä Aoyue
24. elokuuta 2016

Valitse ruutu paikkamerkillä

HTML- ja CSS-valintaruutu paikkamerkillä.
Made by James Nowland
16. toukokuuta 2016

Vain CSS-valinta

Valitse tulo radiotulojen avulla.
Valmistanut Nicolas Udy
9. toukokuuta 2016

Pure CSS Select

Valitse syöte, vain CSS.
Tekijä Raúl Barrera
8. huhtikuuta 2016

Pretty Select-pudotusvalikko

Tämä edelleen käyttää syötteitä lomakkeen lähetysmuuttujien ylläpitoon luottaen ensisijaisesti CSS: ään.
Tekijä j0be
15. tammikuuta 2016

Mukautettu valintaruutu

Mukautettu valintaruutu, jQuery.
Vijaya Kumar Vulchi – 7. tammikuuta 2016

Materiaalisuunnittelun valinta

Materiaalisuunnittelun valinta jQuery-versio.
Valmistanut LukyVJ
3. tammikuuta 2016

Vaakavalinta

Yksinkertainen vaakasuuntainen valinta.
Tehnyt Bharani
23. marraskuuta 2015

Tietoja koodista

Tyylin valintaruutu CSS: llä

Luova tapa valita pudotusvalikot tyylikkäästi vain CSS: n avulla.

Yhteensopivat selaimet: Chrome, Edge, Firefox, Opera, Safari

Reagoiva: kyllä

Riippuvuudet: –

Mukautettu valinta

Helppo tapa mukauttaa valitsemiasi syötteitä.
Tekijä Christophe CORBALAN
10. syyskuuta 2015

Valitse valikko

Valitse valikko HTML: llä, CSS: llä ja JavaScriptillä.
Made by Pierre Laurent
23. kesäkuuta 2015

Mukautettu valinta

Joten niin hyvin yksinkertainen mukautettu valinta.
Valmistanut Yusuf
1.5.2015

Mukautettu valinta

Mukautettu valinta animaatiolla.
Valmistanut Nikolay Talanov
5. syyskuuta 2014

Valintanäppäin

Käsitteiden todistus, usean valinnan widgetille.
Valmistanut Benjamin
23. toukokuuta 2014

CSS3 C ard Deck Drop Down

HTML-, CSS- ja JS-korttipakan pudotusvalikko.
Tekijä Tibor Katelbach
23. heinäkuuta 2013