Sahə üçün "seçmək" üçün bir yer tutucu yaratmaq?

Mən çox yaxşı işləyən mətn daxil etmək üçün yer tutuculardan istifadə edirəm. Lakin mənim seçmək qutularım üçün bir yer tutucu istifadə etmək istərdim. Əlbəttə ki, bu kodu istifadə edə bilərəm:

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

Amma Lightgrey əvəzinə qara rəngdə "versiyasını seçin". Buna görə mənim həllim CSS-yə əsaslanır. jQuery çox gözəl.

Bu yalnız parametrləri açılır siyahıda boz edir (oxa basdıqdan sonra):

 select { color:#999; } 
1234
27 апр. 27 Aprel tarixində Tomas tərəfindən təyin olundu 2011-04-27 16:39 '11 at 16:39 2011-04-27 16:39
@ 27 cavab

Heç bir CSS haqqında - heç bir javascript / jQuery cavab?

2506
02 мая '11 в 18:45 2011-05-02 18:45 cavab 02 may '11 da saat 18: 45-də Davud tərəfindən verilmişdir 2011-05-02 18:45

Yalnız bu suala gəldikdə, FireFox və Chrome-da (ən azı)

Developer.mozilla.org saytında bir neçə nümunə və daha çox uyğunluq əldə edə bilərsiniz. 

Chrome-da Mac elementinin görünməsi:

2019

676
09 дек. Cavab William Isted 09 dekabrda verilir. 2011-12-09 11:22 '11 at 11:22 2011-12-09 11:22

Müasir brauzerlərdə lazımi bir sahə üçün təmiz bir CSS həll var:

 <select required> <option value="" disabled selected>Select something...</option> <option value="1">One</option> <option value="2">Two</option> </select> 
198
22 апр. Cavab MattW tərəfindən verilir 2015-04-22 21:30 '15 saat 21:30 'da 2015-04-22 21:30

Bu kimi bir şey ola bilərmi?

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'nun 27 apreldə cavabladığı cavab 2011-04-27 16:50 '11 saat 16:50 'da 2011-04-27 16:50

Yalnız aşağıda göstərildiyi kimi variantlara gizli bir xüsusiyyət əlavə etdim. Mənim üçün böyük işləyir.

38
30 июня '16 в 13:42 2016-06-30 13:42 Cavab 30 iyul 16: 16-da Ajithkumar S tərəfindən verilir. 2016-06-30 13:42

Bu həll də FireFox-da işləyir:
Hər hansı bir js olmadan.

 <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 февр. Cavab Dani-Br 12 fevralda verilir. 2014-02-12 11:24 '14 at 11:24 2014-02-12 11:24

Mənim də eyni problemim vardı və axtarış bu suala gəldikdə və mənim üçün yaxşı bir həll tapdıqdan sonra hər kəsdən faydalana bilərsə, onu sizinlə bölüşmək istərdim . İşdə: 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"); }); 

Müştəri ilk seçim etdikdən sonra, boz ehtiyac yoxdur, belə ki, JS place_holder sinifini qaldırır. Ümid edirəm bu kimsə kömək edir :)

Yeniləmə: @ user1096901 sayəsində, IE brauzeri üçün bir iş kimi, ilk parametr yenidən seçildiyində place_holder sinfi əlavə edə bilərsiniz :)

21
11 авг. Cavab verilən rramiii 11 Avqust. 2014-08-11 08:00 '14 saat 08:00 'da 2014-08-11 08:00

Hər hansı bir js və ya css, yalnız 3 xüsusiyyətə ehtiyac yoxdur:

 <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> 

bu seçimi heç də göstərmir, yalnız default variant dəyərini təyin edir.

Lakin, qalan kimi eyni rəngli bir tutucuyu sevməsəniz, bununla əlaqə saxlaya bilərsiniz:

 <!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> 

Şübhəsiz ki, funksiyaları və ən azı seçilmiş CSS-yə ayrıca fayllara ayıra bilərsiniz.

Qeyd: onload funksiyası yeniləmə səhvini düzəldir.

14
24 февр. Cavab Jacob Schneider tərəfindən verilir 24 fevral. 2018-02-24 10:54 '18 saat 10:54 'da 201-02-02 10:54

burada mənimdir

 <select> <option selected="selected" class="holder">Please select</option> <option value="1">Option #1</option> <option value="2">Option #2</option> </select> 
13
15 нояб. Cavab Will Wang tərəfindən verilir 15 noyabr. 2016-11-15 09:00 '16 saat 09:00 'da 2016-11-15 saat 09.00 ' a qədər

Burada Davudun cavabını dəyişdim (qəbul edilmiş cavab). Cavabında, əlil və seçilmiş xüsusiyyətləri seçim etikasına qoydu, ancaq gizli bir etiket əlavə edərkən daha yaxşı görünür. Parametr etiketinə əlavə bir gizli atribut əlavə etmək "Durr" parametrini seçdikdən sonra "Parametrinizi seç" parametrini yenidən seçməyə imkan verməyəcəkdir.

12
06 мая '18 в 17:40 2018-05-06 17:40 Cavab Nawaraj tərəfindən mayın 06-də saat 18: 00-da 17 : 40- da 2018-05-06 17:40 tarixində verilir

Doğru cavabların əlamətlərini görürəm, amma hamısını birləşdirmək üçün qərarım olardı.

 <select> <option value="" default selected>Select your option</option> <option value="hurr">Durr</option> </select> 
12
10 апр. cavab user3520445 Apr 10 verildi 2014-04-10 19:50 '14 at 19:50 2014-04-10 19:50

Küncdən istifadə edərsən, buna bənzəyirsən

4
29 авг. cavab verdi arun kumar 29 Avqu. 2018-08-29 12:06 '18 at 12:06 pm 2018-08-29 12:06

JS-də başqa bir xüsusiyyət:

  $('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 Cavab Jean-philipp Emond 21 İyul 2014 'də saat 20:14' də verilir 2014-07-21 20:14

İstifadəçi seçilmiş variantda yer tutucu görməməlidir. Yer tutucu seçeneğinin hidden atributundan istifadə etməyi təklif edirəm və selected xüsusiyyətə bu seçim üçün lazım deyilsinizsə, onu ilk olaraq qoyursunuz.

 <select required> <option value="" hidden>Select your option</option> <option value="0">First option</option> <option value="1">Second option</option> </select> 
3
05 окт. Cavab Roman Yakoviv tərəfindən 05 oktyabr . 2018-10-05 11:03 '18 saat 11:03 ; 2018-10-05 11:03

Hal-hazırda mən işləməyə getmirəm, çünki mənim üçün (1) tələb olunmur və (2) mənim seçimimə qayıtmaq üçün bir seçim lazımdır. Beləliklə, jquery istifadə əgər burada ağır variant istifadə olunur:

 option{ color: #555; } 
2
14 июня '17 в 0:34 2017-06-14 00:34 Cavab Eric G tərəfindən 14 İyun 2014 günü 0:34 2017-06-14 00:34 tarixində verilir

İşdə böyük bir CSS həllidir. İçindəki element ( tərkibdən sonra: yalançı sinifdən sonra ) kontent əlavə edilir (konteynerə nisbətən tamamilə yerləşdirilir). Mətn yer tutan öznitelikten alır və mən direktivi ( attr (yer tutucu) ) istifadə etdiyim yerləri göstərdim. Başqa bir əsas amil hadisə göstəricisidir: heç biri - bu yer tutucu mətndə tıklamaları seçimə getməyə imkan verir. Əks halda, istifadəçi mətn üzərinə tıkladığında çıxmayacaq.

Mənim seçdiyim direktivə azad sinif əlavə edirəm, amma mən odur ki, bu mənfi cəhətləri əlavə edir / aradan qaldırır .Mənim üçün boşdur (mən b /

(Nümunə həmçinin, öz xüsusi girişlərinizi yaratmaq üçün angularJS-də HTML elementlərini necə yerləşdirəcəyini nümayiş etdirir.)

 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 Cavab 09 İyun '17' də 1:12 'də 2017-06-09 01:12' də təqdim edilir

Yalnız HTML istifadə edərək, Javascript istifadə etmədən bunu edə bilərsiniz HTML Default seçmə seçimini disabled=""selected="" üçün təyin required="".required="". etiketi seçməlisiniz required="". Brauzer, istifadəçi formasını seçmədən formu təqdim etməsinə icazə vermir.

 <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 дек. Cavab 15 dekabrda Soleitha Wickramasinghe tərəfindən verilir . 2016-12-15 18:03 '16 'da 18:03' də 2016-12-15 18:03

SELECT'nin bu HTML fraqmenti üçün seçildiyi qədər boz olmaq istədim:

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

Bu CSS anlayışlarını əlavə etdim:

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

Chrome / Safari-də gözlənilən kimi işləyir, bəlkə də digər brauzerlərdə də yox, yox idi.

1
07 июня '17 в 10:56 2017-06-07 10:56 Cavab fbparis tərəfindən 07 İyun '17' də 10:56 2017-06-07 10:56 'də verilir

Bir dəyişiklik üçün cəhd edin.

 $("select").css("color","#757575"); $(document).on("change","select",function(){ if ($(this).val() != "") { $(this).css("color",""); } else { $(this).css("color","#757575"); } }); 
0
15 февр. 15 fevralda İordaniya Lipana tərəfindən cavab verilir. 2018-02-15 10:41 '18 saat 10:41 'da 2018-02-15 10:41' də

başlıq atributunu istifadə edin

 <select title="Gingers are the best"> 
0
25 янв. Cavab Tristanisginger Jan 25 tərəfindən verilir 2019-01-25 19:41 '19 19: 00-19: 2019-01-25 19:41

Burada, ilk klikdən sonra rəng seçimlərini işləyən təmiz bir JavaScript ilə necə nail olmağın bir nümunəsi var :

 <!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 янв. Yanıt Janath 24 ilə verilir 2019-01-24 18:11 '19 'da saat 18:11' də 2019-01-24 18:11 'də

Daxil [type="text"] Seçilmiş elementlər üçün yerləşdirmə stil

Aşağıdakı həll input[type="text"] elementi üçün bir tutucuyu simüle edir:

 .example { color: #999; } .example > option { color: #555; } .example > option[value=""] { color: #999; } 

Mən yuxarıda göstərilən qərarı sevirəm və javascript olmadan böyük işləyir.

Yalnız bu reaksiya komponenti üçün bu cavabı nəzarət edilən bir seçim ilə necə qəbul etdiyimi əlavə etmək istərdim, çünki bunu anlamaq üçün bir az çalışırdı. react-select və bununla məşğul olmaq çox sadədir, amma bu repo təmin edən gözəl funksionallıqa ehtiyacınız yoxdursa, sözügedən layihə üçün etməyəcəyəm, kitimə daha çox KB əlavə etmək lazım deyil. nümunələrə yer tutan müxtəlif inputshtml elementlərinin kompleks bir sistemi.

İzlənilən bir komponent üçün reaksiyada parametrlərinizə selected xüsusiyyət əlavə edə bilməzsiniz. React, seçmə xüsusiyyətini seçmə vəziyyətini özündə bir dəyişiklik işləyicisi ilə birlikdə işləyir, burada dəyər parametrlərin özündə dəyərlərin birinə uyğun olmalıdır.

Beləliklə

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

Yanlış olardı və selected xüsusiyyətləri seçimlərdən birinə əlavə etmək üçün bir səhv verərdi, buna görə?

Bu barədə düşünsəniz, cavab sadədir. İlk option selecteddisabledhidden olmaq istəyirik, biz üç şey etməmiz lazımdır:

  1. hiddendisabled atributu ilk təyin edilmiş option .
  2. Boş bir dize olmaq üçün ilk option dəyərini təyin edin.
  3. Seçdiyiniz dəyərin başlanğıcını da boş bir simli halına gətirin.

Mən yalnız HTML / CSS-nin həlli ilə razı deyiləm, beləliklə JS-dən istifadə edərək xüsusi select yaratmağa qərar verdim.

Son 30 dəqiqədə yazdığım budur, buna görə yaxşılaşdırıla bilər.

Bütün lazım olan bir neçə məlumatın xüsusiyyətləri olan sadə bir siyahısı yaratmaqdır. Kod, siyahıdan avtomatik olaraq açılır siyahıya çevrilir. Həmçinin, seçilmiş dəyəri saxlamaq üçün gizli input əlavə edir, belə ki, forma istifadə edilə bilər.

Giriş:

 <ul class="select" data-placeholder="Role" data-name="role"> <li data-value="admin">Administrator</li> <li data-value="mod">Moderator</li> <li data-value="user">User</li> </ul> 

Çıxış:

 <div class="ul-select-container"> <input type="hidden" name="role" class="hidden"> <div class="selected placeholder"> <span class="text">Role</span> <span class="icon">▼</span> </div> <ul class="select" data-placeholder="Role" data-name="role"> <li class="placeholder">Role</li> <li data-value="admin">Administrator</li> <li data-value="mod">Moderator</li> <li data-value="user">User</li> </ul> </div> 

Yer tutucu elementin mətni gri ilə vurğulanır. Istifadəçi öz seçimini ləğv etmək istəyirsə tutucu seçilə bilər. Ayrıca, CSS-dən istifadə edərək, seçdiyiniz bütün çatışmazlıqları (məsələn, stil variantlarına çatışmazlıqları) aşa bilərsiniz.

JSFiddle , GitHub (adını dəyişdi). 


Yeniləmə: yenidən yazmaq. Siyahıdan istifadə etmək əvəzinə seçimdən istifadə edə bilərik. Beləliklə, JS olmadan da işləyəcək (əlil olduqda).

Giriş:

 <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]); 

Çıxış:

 <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 cavab 13 iyun, saat 18: 05- da 2018-06-13 17:58 tarixində verilir

В Angular мы можем добавить опцию как заполнитель, который можно скрыть в выпадающем списке опций. Мы даже можем добавить собственный выпадающий значок в качестве фона, который заменяет выпадающий значок браузера .

Хитрость заключается в том, чтобы включить заполнитель CSS только тогда, когда значение не выбрано

  <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> 

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

 .dropdown { width: 100%; height: 30px; overflow: hidden; background: no-repeat white; background-image:url('angle-arrow-down.svg'); background-position: center right; select { background: transparent; padding: 3px; font-size: 1.2em; height: 30px; width: 100%; overflow: hidden;  -moz-appearance: none;   { display: none; }  -webkit-appearance:none;  { opacity: 0.7; color: theme-color('mutedColor'); } option { color: black; } } } 
0
ответ дан Mukundhan 26 янв. '19 в 15:10 2019-01-26 15:10

Вот мой вклад. HAML + Coffeescript + SCSS

HAML
 =f.collection_select :country_id, [us] + Country.all, :id, :name, {prompt: t('user.country')}, class: 'form-control' 
Coffeescript
  $('select').on 'change', -> if $(this).val() $(this).css('color', 'black') else $(this).css('color', 'gray') $('select').change() 
SCSS
 select option { color: black; } 

Можно использовать только CSS, изменяя код сервера и устанавливая только стили классов в зависимости от текущего значения свойства, но этот способ кажется более простым и понятным.

  select option { color: black; } 

В отношении всех решений выше, но этот, по-видимому, наиболее важен из-за спецификаций HTML:

 <select> <optgroup label="Your placeholder"> <option value="value">Label</option> </optgroup> </select> 

ОБНОВЛЕНИЕ: Извините меня за этот неправильный ответ, это определенно не является заменителем для элемента select , а заголовок для сгруппированных опций в открытом списке элементов select .

-6
ответ дан dr.dimitru 28 марта '16 в 18:26 2016-03-28 18:26

Другие вопросы по меткам или Задайте вопрос