Ar galima sukurti atrankos lauką?

Turiu HTML pasirinkimo laukelį, kurį turiu stilioti. Norėčiau naudoti tik CSS, bet jei turiu naudoti jQuery užpildyti blankus.

Ar kas nors gali rekomenduoti gerą pamoką ar papildinį?

Žinau „Google“, bet aš ieškojau pastarųjų dviejų valandų, ir nerandu nieko, kas atitiktų mano poreikius.

Tai turėtų būti:

  • JQuery 1.3.2 suderinamumas
  • Galima
  • Neįtikėtina
  • Visiškai pritaikoma atsižvelgiant į kiekvieno pasirinkimo >

Ar kas nors žino, kas patenkins mano poreikius?

141
02 июля '09 в 6:02 2009-07-02 06:02 dougoftheabaci yra nustatytas 02 liepa '09, 06:02 2009-07-02 06:02
@ 15 atsakymų

Mačiau kai kuriuos „jQuery“ įskiepius, kurie konvertuoja <select> į <ol> ir <option> į <li> , kad galėtumėte stilių su CSS. Tai negali būti per sunku.

Čia yra vienas: https://gist.github.com/1139558 (Naudojamas čia , bet atrodo, kad svetainė yra žemyn.)

Naudokite jį taip:

 $('#myselectbox').selectbox(); 

Šis stilius atrodo taip:

 div.selectbox-wrapper ul { list-style-type:none; margin:0px; padding:0px; } div.selectbox-wrapper ul li.selected { background-color: #EAF2FB; } div.selectbox-wrapper ul li.current { background-color: #CDD8E4; } div.selectbox-wrapper ul li { list-style-type:none; display:block; margin:0; padding:2px; cursor:pointer; } 
45
02 июля '09 в 6:10 2009-07-02 06:10 atsakė Markas A. Nicolosi liepos 2 d

Atnaujinti :. Iki 2013 m. Du, kuriuos mačiau, nusipelnė čekio:

  • Pasirinkta - daug vėsių dalykų, 7k + stebėtojų github. („mokama nerd“ yra paminėta komentaruose)
  • Select2 - įkvėptas pasirinkto, „Angular -UI“ dalies su dviem naudingais nustatymais parinktyje.

Taip


Nuo 2012 m. Vienas iš paprasčiausių, lankstiausių sprendimų, kurį radau, yra „ ddSlick“ . Tinkama (redaguota) informacija iš svetainės:

  • Prideda vaizdus ir tekstą, kad select options
  • Gali naudoti JSON, jei norite užpildyti parametrus
  • Renkantis atgalinio ryšio funkciją

Ir čia yra įvairių režimų peržiūra:

2019

17
07 окт. Atsakyti papercowboy 07 okt. 2012-10-07 23:14 '12, 23:14, 2012-10-07 23:14

Kalbant apie CSS, „Mozilla“ atrodo labiausiai draugiška, ypač su FF 3.5+. Webkit naršyklės iš esmės tiesiog atlieka savo darbą ir ignoruoja bet kokį stilių. IE yra labai ribotas, nors IE8 leidžia bent jau sienos stiliaus / spalvos.

FF 3.5+ tai iš tikrųjų atrodo gana gera (pasirinkimas, žinoma, yra spalva):

 select { -moz-border-radius: 4px; -moz-box-shadow: 1px 1px 5px #cfcfcf inset; border: 1px solid #cfcfcf; vertical-align: middle; background-color: transparent; } option { background-color: #fef5e6; border-bottom: 1px solid #ebdac0; border-right: 1px solid #d6bb86; border-left: 1px solid #d6bb86; } option:hover { cursor: pointer; } 

Tačiau, kai kalbama apie IE, turite išjungti fono spalvą pasirinkime, jei nenorite, kad jis būtų rodomas, kai parinkčių meniu nebuvo pašalintas. Ir, kaip sakiau, interneto rinkinys atlieka savo darbą.

14
18 июня '10 в 20:39 2010-06-18 20:39 atsakymą pateikė „ Arx Poetica“ birželio 18 d. 10 val. 20:39 2010-06-18 20:39

Mes radome paprastą ir padorų būdą tai padaryti. Tai yra kryžminė naršyklė, suardoma ir nepažeidžia formos pranešimo. Pirma, nustatykite pasirinkimo >

 .select { opacity : 0; width: 200px; height: 15px; } <select class='select'> <option value='foo'>bar</option> </select> 

tai reiškia, kad vis tiek galite jį spustelėti

Tada padarykite tą patį dydį kaip pasirinkimo laukelį. Dalis turėtų būti po pasirinkimo lauko kaip fonas. Kad pasiektumėte šį tikslą, naudokite {pozicija: absoliutus} ir z-indeksą.

 .div { width: 200px; height: 15px; position: absolute; z-index: 0; } <div class='.div'>{the text of the the current selection updated by javascript}</div> <select class='select'> <option value='foo'>bar</option> </select> 

Atnaujinkite „InternalHTML div“ naudodami javascript. „Easypeasy“ su „jQuery“:

 $('.select').click(function(event)) { $('.div').html($('.select option:selected').val()); } 

Kas tai yra! Tiesiog sukurkite savo divą vietoj pasirinkimo lauko. Aš neišbandžiau pirmiau minėto kodo, todėl tikriausiai turite jį konfigūruoti. Bet tikiuosi, kad gausite esminį.

Manau, kad šis sprendimas sugeba {-webkit-megjelenimas: nėra;}. Kokios naršyklės turėtų daryti geriausiu atveju, diktuoja sąveiką su formų elementais, bet tikrai ne kaip jie iš pradžių buvo rodomi puslapyje, nes tai pažeidžia svetainės dizainą.

11
11 марта '12 в 22:17 2012-03-11 22:17 atsakymą pateikė Shaun , kovo 11 d., 12 val., 10:17 2012-03-03 22:17

Štai mažas įskiepis, jei iš esmės norite

  • išprotėjęs, nustatydamas, kad select būsena bus uždaryta
  • bet atviroje būsenoje, jūs pageidaujate geriausios patirties pasirinkdami parinktis (slinkties ratukas, rodyklių klavišai, fokusavimo skirtukai, ajax modifikacijos options , teisingas zindex ir tt).
  • nepatinka nereguliarus ul , li sukurtas žymėjimas

Tada jquery.yaselect.js gali būti tinkamesnis . Tiesiog:

 $('select').yaselect(); 

Ir galutinis žymėjimas:

 <div class="yaselect-wrap"> <div class="yaselect-current"><!-- current selection --></div> </div> <select class="yaselect-select" size="5"> <!-- your option tags --> </select> 

Patikrinkite jį „ github.com“

10
09 марта '11 в 7:19 2011-03-09 07:19 atsakymą pateikė choonkeat kovo 09 '11, 07:19 2011-03-09 07:19

CSS galite stilizuoti tam tikru mastu

 select { background: red; border: 2px solid pink; } 

Bet tai visiškai priklauso nuo naršyklės. Kai kurios naršyklės yra užsispyrusios.

Tačiau tai tik parodys jums iki šiol, ir tai ne visada atrodo labai gerai. Norėdami visiškai kontroliuoti, turėsite pakeisti pasirinkimą per jQuery su savo valdikliu, kuris imituoja pasirinkimo >

5
02 июля '09 в 6:06 2009-07-02 06:06 atsakymas pateikiamas alexo liepos 02 d., 06:06 2009-07-02 06:06

Aš tai tiesiog nustatiau, kad atrodo tikrai gera.

http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

4
29 дек. Jenny atsakymas, pateiktas gruodžio 29 d. 2011-12-29 00:13 '12 - 0:13 2011-12-29 00:13

Dauguma naršyklių nepalaiko pasirinkto žyma su css. Tačiau manau, kad šis javascript, kurį galima naudoti pasirinktam žymės stiliui. Tačiau, kaip įprasta, parama IE naršyklėms nepalaikoma.

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ Aš pastebėjau klaidą, kad atributas „Onchange“ neveikia

4
22 нояб. atsakymą pateikė Šri 22 nov. 2010-11-22 14:45 '10, 14:45, 2010-11-22 14:45

Atnaujinta 2014 m .: jums nereikia jQuery. Galite visiškai sukurti pasirinkimo lauką be „jQuery“ naudodami „ StyleSelect“ . Pavyzdžiui, su šiuo pasirinkimo >

 <select class="demo"> <option value="value1">Label 1</option> <option value="value2" selected>Label 2</option> <option value="value3">Label 3</option> </select> 

Vykdant stiliaus pasirinkimą styleSelect('select.demo') sukursite stiliaus pasirinkimo >

2019

2
27 окт. atsakymas, kurį pateikė mikemaccana, spalio 27 d. 2014-10-27 17:22 '14, 17:22 2014-10-27 17:22

Jei yra sprendimas be „jQuery“. Nuoroda, kurioje matysite darbo pavyzdį: http://www.letmaier.com/_selectbox/select_general_code.html (css stiliaus)

Mano sprendimo stiliaus skyrius:

 <style> #container { margin: 10px; padding: 5px; background: #E7E7E7; width: 300px; background: #ededed); } #ul1 { display: none; list-style-type: none; list-style-position: outside; margin: 0px; padding: 0px; } #container a { color: #333333; text-decoration: none; } #container ul li { padding: 3px; padding-left: 0px; border-bottom: 1px solid #aaa; font-size: 0.8em; cursor: pointer; } #container ul li:hover { background: #f5f4f4; } </style> 

Dabar kūno žymės viduje esantis HTML kodas:

 <form> <div id="container" onMouseOver="document.getElementById('ul1').style.display = 'block';" onMouseOut="document.getElementById('ul1').style.display = 'none';"> Select one entry: <input name="entrytext" type="text" disabled readonly> <ul id="ul1"> <li onClick="document.forms[0].elements['entrytext'].value='Entry 1'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 1</a></li> <li onClick="document.forms[0].elements['entrytext'].value='Entry 2'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 2</a></li> <li onClick="document.forms[0].elements['entrytext'].value='Entry 3'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 3</a></li> </ul> </div> </form> 
2
07 февр. Christoph Letmaier atsakymas 07 Vas 2014-02-07 21:00 '14 21:00 val. 2014-02-07 21:00

Prieš porą dienų sukūriau „jQuery“ papildinį „ SelectBoxIt“ . Jis bando imituoti įprastinio HTML pasirinkimo >

http://www.selectboxit.com

1
18 апр. Greg Franko atsakymas, pateiktas balandžio 18 d 2012-04-18 09:01 '12 at 9:01 am 2012-04-18 09:01

Atrodo senas, bet čia yra labai įdomus papildinys - http://uniformjs.com

1
11 авг. atsakymas pateikiamas rzr 11 rug. 2012-08-11 10:45 '12, 10:45 am 2012-08-11 10:45

Turėtumėte pabandyti naudoti bet kurį „jQuery“ papildinį, pvz., IkSelect .

Bandžiau padaryti ją labai pritaikomą, bet paprasta naudoti.

http://github.com/Igor10k/ikSelect

1
05 мая '12 в 0:59 2012-05-05 00:59 atsakymas duotas i10k 05 gegužės 12 d. 0:59 2012-05-05 00:59

tai naudoja „ twitter-bootstrap stilius, kad būtų galima select dropdown meniu https://github.com/silviomoreto/bootstrap-select

0
13 марта '13 в 18:08 2013-03-13 18:08 Atsakymas yra anacarolinats, kovo 13 d., 13 val., 18:08 2013-03-13 18:08

Paprasčiausias sprendimas - išsiskirti savo pasirinkimo dėžutę div ir stiliaus, atitinkančio jūsų dizainą. Nustatykite neskaidrumą: 0, kad pasirinktumėte lauką, todėl atrankos >Šioje pamokoje buvo parodyta bendra demonstracija su kodo paaiškinimu. Tikiuosi, kad tai išspręs jūsų problemą.

JQuery kodas yra panašus.

  <script> $(document).ready(function(){ $('.dropdown_menu').each(function(){ var baseData = $(this).find("select option:selected").html(); $(this).prepend("<span>" + baseData + "</span>"); }); $(".dropdown_menu select").change(function(e){ var nodeOne = $(this).val(); var currentNode = $(this).find("option[value='"+ nodeOne +"']").text(); $(this).parents(".dropdown_menu").find("span").text(currentNode); }); }); </script> 
-1
05 авг. atsakymą pateikė user3716078 05 rug . 2014-08-05 01:52 '14 at 1:52 am 2014-08-05 01:52

Kiti klausimai apie „ žymes arba užduoti klausimą