Kaip sukurti lauką „select“?

Aš naudoju vietos žymenis, kad įvestumėte tekstą, kuris veikia labai gerai. Bet norėčiau naudoti savo pasirinkimo dėžutės vietos žymeklį. Žinoma, galiu naudoti šį kodą:

 <select> <option value="">Select your option</option> <option value="hurr">Durr</option> </select> 

Bet „Pasirinkite savo versiją“ juodoje vietoje šviesos. Todėl mano sprendimas gali būti pagrįstas CSS. jQuery taip pat yra gražus.

Tai išskleidžiamajame sąraše tik pilka pelėda (taip paspaudus rodyklę):

 select { color:#999; } 
1239
27 апр. nustatė Thomas balandžio 27 d 2011-04-27 16:39 '11, 16:39, 2011-04-27 16:39
@ 27 atsakymai

Kaip apie ne CSS - nėra javascript / jQuery atsakymo?

2520
02 мая '11 в 18:45 2011-05-02 18:45 atsakymą davė Dovydas gegužės 11 d. 11 val. 18:45 2011-05-02 18:45

Tiesiog iškilo šis klausimas, kuris veikia „FireFox“ ir „Chrome“ (bent jau)

Pašalintas style="display: none" naudingas HTML5 hidden atributui, turinčiam platų palaikymą. hidden elementas pasižymi panašiomis funkcijomis, pvz., display: none „Safari“, „IE“ nėra (norint patikrinti „Spartan“ projektą, reikalingas patvirtinimas), kur option rodoma išskleidžiamajame sąraše, bet nepasirinkta.

Atnaujinimas (2016 m. Sausio mėn.):

Kai reikia select elementą, galite naudoti pseudo klasės klasę :invalid CSS, kuri leidžia jums select elementą, kai jame yra „vietos“. :invalid čia :invalid dėl tuščios vietos vietos parinkimo vertės.

Nustatius vertę, bus pašalinta :invalid klasės pseudo klasė. Taip pat galite naudoti :valid jei norite.

Dauguma naršyklių palaiko šią pseudo klasę. IE10 +. Tai geriausiai tinka pagal select stilius; Kai kuriais atvejais, pvz., „Mac“ sistemoje „Chrome“ / „Safari“, reikia pakeisti select >background-color , color . Galite rasti keletą pavyzdžių ir daugiau apie suderinamumą adresu developer.mozilla.org .

„Mac“ elemento išvaizda „Chrome“:

2019

680
09 дек. Atsakymą pateikė William Isted 09 dec. 2011-12-09 11:22 '11, 11:22, 2011-12-09 11:22

Reikiamam laukui šiuolaikinėse naršyklėse yra grynas CSS sprendimas:

 <select required> <option value="" disabled selected>Select something...</option> <option value="1">One</option> <option value="2">Two</option> </select> 
199
22 апр. Atsakymą pateikė MattW 22 balandžio. 2015-04-22 21:30 '15 21:30 val. 2015-04-22 21:30

Kažkas panašaus galėtų būti?

HTML:

 <select id="choice"> <option value="0" selected="selected">Choose...</option> <option value="1">Something</option> <option value="2">Something else</option> <option value="3">Another choice</option> </select> 

CSS

http://jsfiddle.net/Zmf6t/ 

95
27 апр. Albireo atsakymas, pateiktas balandžio 27 d 2011-04-27 16:50 '11, 16:50, 2011-04-27 16:50

Aš tiesiog pridėjau paslėptą atributą prie parinkčių, kaip parodyta žemiau. Jis puikiai tinka man.

38
30 июня '16 в 13:42 2016-06-30 13:42 atsakymą pateikė Ajithkumar S birželio 30 d. 16 d. 13:42. 2016-06-30 13:42

Šis sprendimas taip pat veikia „FireFox“:
Be jokių js.

 <select> <option value="" default selected>Select Your Age</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> 
25
12 февр. Atsakymas duotas Dani-Br 12 vasario mėn. 2014-02-12 11:24 '14 at 11:24 2014-02-12 11:24

Aš turėjau tą pačią problemą, o kai ieškoma šio klausimo, ir po to, kai man buvo rastas geras sprendimas, norėčiau pasidalinti ja su jumis vaikais, jei kas nors gali iš to gauti naudos . Čia yra: HTML:

 <select class="place_holder dropdown"> <option selected="selected" style=" display: none;">Sort by</option> <option>two</option> <option>something</option> <option>4</option> <option>5</option> </select> 

CSS

 .place_holder{ color: gray; } option{ color: #000000; } 

Js:

 jQuery(".dropdown").change(function () { jQuery(this).removeClass("place_holder"); }); 

Po to, kai klientas pasirenka pirmąjį pasirinkimą, nereikia pilkos spalvos, todėl JS pašalina place_holder klasę. Tikiuosi, kad tai padės kam nors :)

Atnaujinimas: dėka @ user1096901, kaip IE naršyklės užduotį, galite vėl pridėti place_holder klasę, jei vėl pasirenkamas pirmasis parametras :)

21
11 авг. atsakymas suteiktas rramiii 11 rug . 2014-08-11 08:00 '14, 08:00 2014-08-11 08:00

Nereikia jokių js ar css, tik 3 atributai:

 <select> <option selected disabled hidden>Default Value</option> <option>Value 1</option> <option>Value 2</option> <option>Value 3</option> <option>Value 4</option> </select> 

ji visai nerodo pasirinkimo, ji tiesiog nustato numatytąją parinkties vertę.

Tačiau, jei jums nepatinka tos pačios spalvos, kaip ir kitos , vietos, galite ją išspręsti taip:

 <!DOCTYPE html> <html> <head> <title>Placeholder for select tag drop-down menu</title> </head> <body onload="document.getElementById('mySelect').selectedIndex = 0"> <select id="mySelect" onchange="document.getElementById('mySelect').style.color = 'black'" style="color: gray; width: 150px;"> <option value="" hidden>Select your beverage</option> <!-- placeholder --> <option value="water" style="color:black" >Water</option> <option value="milk" style="color:black" >Milk</option> <option value="soda" style="color:black" >Soda</option> </select> </body> </html> 

Akivaizdu, kad galite atskirti funkcijas ir bent jau pasirinktą CSS atskirais failais.

Pastaba: įkrovos funkcija nustato atnaujinimo klaidą.

14
24 февр. Atsakymą pateikė Jacob Schneider 24 vasaris. 2018-02-24 10:54 '18 at 10:54 201-02-02 10:54

čia yra mano

 <select> <option selected="selected" class="holder">Please select</option> <option value="1">Option #1</option> <option value="2">Option #2</option> </select> 
13
15 нояб. Atsakymą pateikė Will Wang, lapkričio 15 d. 2016-11-15 09:00 '16 at 9:00 2016-11-15 09:00

Čia aš pakeitiau Dovydo atsakymą (priimtą atsakymą). Savo atsakyme jis įjungė neįgaliuosius ir pasirinktus atributus į parinkties žymę, bet kai pridėsime paslėptą žymą, jis atrodys daug geriau. Įtraukus papildomą paslėptą atributą į parametrų žymę, nebus galima iš naujo pasirinkti parametrą „Parinkti savo parametrą“, pasirinkus parametrą „Durr“.

12
06 мая '18 в 17:40 2018-05-06 17:40 Atsakymą davė Nawaraj gegužės 06 d. 18 d. 17.40 2018-05-06 17:40

Matau teisingų atsakymų požymius, bet visa tai būtų mano sprendimas.

 <select> <option value="" default selected>Select your option</option> <option value="hurr">Durr</option> </select> 
12
10 апр. atsakymas, kurį pateikė user3520445 Apr 10 2014-04-10 19:50 '14, 19:50, 2014-04-10 19:50

Jei naudojate kampą, eikite taip

4
29 авг. atsakymas duotas arun kumar 29 rug. 2018-08-29 12:06 '18, 12:06 val. 2018-08-29 12:06

Kita JS funkcija:

  $('body').on('change','select', function (ev){ if($(this).find('option:selected').val() == ""){ $(this).css('color','#999'); $(this).children().css('color','black'); } else { $(this).css('color','black'); $(this).children().css('color','black'); } }); 

Jsfiddle

4
21 июля '14 в 20:14 2014-07-21 20:14 atsakymą pateikė Jean-philippe Emond, liepos 21 d. 14, 20:14 2014-07-21 20:14

Naudotojas neturėtų matyti vietos žymeklio pasirinktose parinktyse. Siūlau naudoti hidden atributą, skirtą vietovės savininkui, ir jums nereikia selected atributo šiai parinkčiai, galite tiesiog įdėti ją kaip pirmąjį.

 <select required> <option value="" hidden>Select your option</option> <option value="0">First option</option> <option value="1">Second option</option> </select> 
3
05 окт. Atsakymą pateikė Roman Yakoviv 05 okt. 2018-10-05 11:03 '18, 11:03 ; 2018-10-05 11:03

Šiuo metu negaliu jų dirbti, nes man tai nėra (1), ir (2) man reikia parinkties grįžti prie numatytojo pasirinkimo. Taigi, jei naudojatės „jquery“, čia naudojama sunki parinktis:

 option{ color: #555; } 
2
14 июня '17 в 0:34 2017-06-14 00:34 atsakymą pateikė Eric G birželio 14 d. 17, 0:34 2017-06-14 00:34

Čia yra CSS sprendimas, kuris puikiai veikia. Turinys pridedamas (ir absoliučiai išdėstytas konteinerio atžvilgiu) po turinio elemento ( per: po pseudo klasės ). Jis gauna savo tekstą iš vietovės savininko atributo, kurį nurodiau ten, kur naudoju direktyvą ( attr (placeholder) ). Kitas svarbus veiksnys yra įvykio rodyklė: nėra - tai leidžia paspaudimus ant vietos rezervavimo teksto pereiti prie pasirinkimo. Priešingu atveju, jei vartotojas paspaudžia ant teksto, jis neišnyks.

Pridedu .empty klasę į mano pasirinktą direktyvą, bet paprastai manau, kad kampinis prideda / pašalina .ng-tuščią už mane (manau, b / c aš įterpsiu 1.2 versiją iš kampinio mano kodo pavyzdyje)

(Pavyzdys taip pat parodo, kaip HTML elementus apvynioti angularJS, kad sukurtumėte savo individualius įrašus.)

 so-select { position: relative; } so-select select { font-family: 'Helvetica'; display: inline-block; height: 24px; width: 200px; padding: 0 1px; font-size: 12px; color: #222; border: 1px solid #c7c7c7; border-radius: 4px; } so-select.empty:before { font-family: 'Helvetica'; font-size: 12px; content: attr(placeholder); position: absolute; pointer-events: none; left: 6px; top: 3px; z-index: 0; color: #888; } 
2
09 июня '17 в 1:12 2017-06-09 01:12 Atsakymą pateikia skrajutė birželio 09 d. 17 val. 1:12 2017-06-09 01:12

Tai galite padaryti nenaudodami „ Javascript , naudodami tik HTML reikia nustatyti numatytąją pasirinkimo parinktį, kad ji būtų disabled="" ir selected="" ir pasirinkite required="". žymą required="". Naršyklė neleidžia vartotojui pateikti formos nepasirinkus pasirinkimo.

 <form action="" method="POST"> <select name="in-op" required=""> <option disabled="" selected="">Select Option</option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> <input type="submit" value="Submit"> </form> 
1
15 дек. Atsakymą pateikė Suchitha Wickramasinghe gruodžio 15 d. 2016-12-15 18:03 '16 at 18:03 2016-12-15 18:03

Norėjau, kad SELECT būtų pilkas, kol šis HTML fragmentas bus pasirinktas kaip toks:

 <select> <option value="" disabled selected>Select your option</option> <option value="hurr">Durr</option> </select> 

Pridėjau šiuos CSS apibrėžimus:

 select { color: grey; } select:valid { color: black; } 

Jis veikia taip, kaip tikėtasi „Chrome“ / „Safari“, galbūt ir kitose naršyklėse, bet aš netikrinau.

1
07 июня '17 в 10:56 2017-06-07 10:56 atsakymą pateikė „ fbparis “ birželio 17 d. 17 val. 10:56 2017-06-07 10:56

Kampiniame kampe galime pridėti variantą kaip vietos žymeklį, kuris gali būti paslėptas išskleidžiamajame parinkčių sąraše. Netgi galite pridėti savo išskleidžiamąją piktogramą kaip foną, kuri pakeičia išskleidžiamąją naršyklės piktogramą.

Apgaulė yra įtraukti CSS vietos žymeklį tik tada, kai nėra pasirinkta jokia reikšmė.

/ ** Mano komponento šablonas * /

  <div class="dropdown"> <select [ngClass]="{'placeholder': !myForm.value.myField}" class="form-control" formControlName="myField"> <option value="" hidden >Select a Gender</option> <option value="Male">Male</option> <option value="Female">Female</option> </select> </div> 

/ ** Mano komponentas .TS * /

 constructor(fb: FormBuilder) { this.myForm = this.fb.build({ myField: '' }); } 

-moz-appearance: none; { display: none; } -webkit-appearance:none; { opacity: 0.7; color: theme-color('mutedColor'); } option { color: black; } } }

0
26 янв. Atsakymą pateikė Mukundhan sausio 26 d. 2019-01-26 15:10 '19, 15:10 pm 2019-01-26 15:10

Man patinka aukščiau priimtas sprendimas, ir jis puikiai veikia be javascript.

Aš tik noriu pridurti, kaip aš priėmiau šį atsakymą į „React“ komponentą , turintį kontroliuojamą pasirinkimą , nes man teko kelis bandymus ją išsiaiškinti. Būtų labai paprasta įjungti react-select ir tai padaryti, tačiau jei jums nereikia nuostabių funkcijų, kurias teikia šis atpirkimo sandoris, o ne dėl projekto, nereikia pridėti daugiau KB prie mano rinkinio. vietovės, kuriose yra sudėtingų sistemų, kuriose yra įvairių inputs ir html elementų.

Stebėto komponento reakcijoje negalite pridėti selected atributų į savo parametrus. Reakcija apdoroja atrankos būseną, naudodama patį atributą, kartu su keitimo tvarkikliu, kur vertė turi atitikti vieną iš parametrų reikšmių patys.

Pavyzdžiui,

 <select value={this.state.selectValue} onChange={this.handleChange} required={true}> {options} </select> 

Kadangi tai būtų neteisinga ir iš tikrųjų būtų padaryta klaida pridedant selected atributą į vieną iš parinkčių, kas tada?

Atsakymas yra paprastas, jei manote apie tai. Kadangi norime, option būtų selected pirmasis option taip pat disabled ir hidden , turime daryti tris dalykus:

  1. Pridėkite hidden ir disabled atributą į pirmą apibrėžtą option .
  2. Nustatykite pirmojo option vertę kaip tuščią eilutę.
  3. Inicijuoti select vertę taip, kad ji būtų ir tuščia eilutė.
 
JSFiddle , GitHub (pervadintas). 


Atnaujinimas: perrašykite jį dar kartą. Užuot naudoję šį sąrašą, mes galime tiesiog naudoti pasirinkimą. Taigi jis veiks net ir be JS (jei jis yra išjungtas).

Įvestis:

 <select name="role" data-placeholder="Role" required title="Role"> <option value="admin">Administrator</option> <option value="mod">Moderator</option> <option>User</option> </select> 

 new Advancelect(document.getElementsByTagName("select")[0]); 

Išeiti:

 <div class="advanced-select"> <input type="text" readonly="" placeholder="Role" title="Role" required="" name="role"> <span class="arrow">▼</span> <ul> <li class="placeholder">Role</li> <li data-value="admin">Administrator</li> <li data-value="mod">Moderator</li> <li>User</li> </ul> </div> 

JSFiddle , GitHub .

0
13 июня '18 в 17:58 2018-06-13 17:58 atsakymas pateikiamas akinuri birželio 13 d., 18 val., 18:58, 2018-06-13 17:58

Pabandykite jį pakeisti.

 $("select").css("color","#757575"); $(document).on("change","select",function(){ if ($(this).val() != "") { $(this).css("color",""); } else { $(this).css("color","#757575"); } }); 
0
15 февр. Atsakymą pateikė Jordan Lipana , vasario 15 d. 2018-02-15 10:41 '18, 10:41 val. 2018-02-15 10:41

Čia pateikiamas darbo pavyzdys , kaip tai pasiekti gryname „JavaScript“, kuris apdoroja spalvų parinktis po pirmojo paspaudimo:

 <!DOCTYPE html> <html> <head> <style> #myselect{ color:gray; } </style> </head> <body> <select id="myselect"> <option disabled selected>Choose Item </option> <option>Item 1 </option> <option>Item 2 </option> <option>Item 3 </option> </select> <script> // add event listener to change color in the first click document.getElementById("myselect").addEventListener("click",setColor) function setColor() { var combo = document.getElementById("myselect"); combo.style.color = 'red'; // remove Event Listener after the color is changed at the first click combo.removeEventListener("click", setColor); } </script> </body> </html> 
0
24 янв. Atsakymą pateikė jonathana Jan 24 2019-01-24 18:11 '19, 18:11 PM 2019-01-24 18:11

naudoti antraštės atributą

 <select title="Gingers are the best"> 
0
25 янв. Atsakymą pateikė Tristanisginger 25 sausis 2019-01-25 19:41 '19 , 7:41 pm 2019-01-25 19:41

Įvestis [type="text"] Pasirinktų elementų vietovės stilius

Следующее решение имитирует заполнитель применительно к элементу input[type="text"] :

 .example { color: #999; } .example > option { color: #555; } .example > option[value=""] { color: #999; } 
var _tmr = window._tmr || (window._tmr = []);_tmr.push({id: "2334768", type: "pageView", start: (new Date()).getTime()});(function (d, w, id) {  if (d.getElementById(id)) return;  var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id;  ts.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//top-fwz1.mail.ru/js/code.js";  var f = function () {var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ts, s);};  if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); }})(document, window, "topmailru-code");