'Seç' kutusu için nasıl yer tutucu yapabilirim?


1542

Ben iyi çalışıyor metin girişleri için yer tutucular kullanıyorum. Ancak seçim kutularım için de bir yer tutucu kullanmak istiyorum. Tabii ki sadece bu kodu kullanabilirsiniz:

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

Ancak 'Seçeneklerinizi belirleyin' açık gri yerine siyah renktedir. Yani benim çözümüm muhtemelen CSS tabanlı olabilir. jQuery de iyidir.

Bu, yalnızca açılır menüdeki seçeneği gri yapar (bu nedenle oku tıkladıktan sonra):

option:first {
    color: #999;
}

Soru şudur: Kullanıcılar seçme kutularında yer tutucuları nasıl oluşturur? Ama çoktan cevaplandı, şerefe.

Ve bu, seçilen değerin her zaman gri olmasına neden olur (gerçek bir seçenek seçtikten sonra bile):

select {
    color: #999;
}

1
Birisinin bunu okuması durumunda - tarayıcının yerleşik doğrulamasıyla modern tarayıcılar için daha yaygın bir çözüm yayınladım. 2020 yılına hoş geldiniz;)
Jurik

Yanıtlar:


2974

CSS dışı - JavaScript / jQuery yanıtı yok:

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


134
Firefox (10) varsayılan seçim (yer tutucu) olarak devre dışı bırakılmış bir seçenek göstermez. Varsayılan olarak bir sonrakini gösterir, bu durumda "Durr".
jarnoan

53
Genellikle hem devre dışı hem de seçilenleri eklerim. FF'de de çalışıyor gibi görünüyor.
nilskp

11
<select> <option value="" disabled selected>Select your option</option> </select>
kolypto

183
Bunun doğru cevabın olmamasının nedeni, (başka bir değer seçilene kadar askerin seçimin gri olmasını istediğidir). Bu cevap açılır menüde seçeneği gri yapar; ancak select öğesi değil .
Bill

22
{seçenek [devre dışı] {display: none; }}
Dimael Vertigo

822

Bu soruya rastladım ve işte Firefox ve Chrome'da (en azından) çalışanlar:

<style>
select:invalid { color: gray; }
</style>
<form>
<select required>
    <option value="" disabled selected hidden>Please Choose...</option>
    <option value="0">Open when powered (most valves do this)</option>
    <option value="1">Closed when powered, auto-opens when power is cut</option>
</select>
</form>

Engelli seçenek durur <option>sadece kullanılarak oysa, fare ve klavye hem seçilen varlık 'display:none'hala klavye oklarla seçmesine olanak verir. 'display:none'Tarzı sadece liste kutusu görünüm 'güzel' yapar.

Not: Boş bir kullanma value "yer tutucu" seçeneğinde öznitelik , doğrulama (gerekli özellik) "yer tutucusuna" sahip olmak için geçici çözüm sağlar, bu nedenle seçenek değiştirilmez ancak zorunluysa tarayıcı kullanıcıdan bir seçenek belirlemesini ister listeden.

Güncelleme (Temmuz 2015):

Bu yöntemin aşağıdaki tarayıcılarda çalıştığı onaylanmıştır:

  • Google Chrome - v.43.0.2357.132
  • Mozilla Firefox - v.39.0
  • Safari - v.8.0.7 (yer tutucu açılır menüde görünür, ancak seçilemez)
  • Microsoft Internet Explorer - v.11 (Yer tutucu açılır menüde görünür, ancak seçilemez)
  • Spartan Projesi - v.15.10130 (yer tutucu açılır menüde görünür, ancak seçilemez)

Güncelleme (Ekim 2015):

Geniş desteği olan style="display: none"HTML5 özelliği lehine kaldırdım hidden. hiddenEleman gibi benzer hususlara sahip display: noneSafari, Internet Explorer, (Proje Spartan denetimi gerekiyor) neredeoption açılan görünür, ancak seçilemez.

Güncelleme (Ocak 2016):

Ne zaman selectunsurdur requiredo kullanımına izin verir :invalidsize stil sağlayan BB sözde sınıfının selectzaman onun "tutucu" durumunda elemanı. :invalidyer tutucusundaki boş değer nedeniyle burada çalışıroption .

Bir değer ayarlandıktan sonra :invalidsözde sınıf bırakılır. İsteğe bağlı olarak:valid .

Çoğu tarayıcı bu sözde sınıfı destekler. Internet Explorer 10 ve üstü. Bu en iyi özel stil selectöğeleriyle çalışır ; Bazı durumlarda (Krom / Safari'de Mac) yani sen varsayılan görünümünü değiştirmek gerekir selectyani belirli stilleri görüntülemek böylece kutu, background-colorve color. Developer.mozilla.org sitesinde uyumluluk hakkında bazı örnekler ve daha fazlasını bulabilirsiniz .

Chrome'da yerel öğe görünümü Mac:

Chrome'da yerel Mac kutusunu seçin

Chrome'da değiştirilmiş kenarlık öğesi Mac'i kullanma:

Chrome'da seçim kutusu Mac'i değiştirildi


5
@jaacob Test ettiğim tarayıcılarda 'display: none' tarzı, listeden "Lütfen seçin" i gizler, bu da daha güzel görünmesini sağlar.
William Isted

38
Devre dışı bırakılmış bir seçeneğin yeniden seçilemeyeceğini belirtmek önemlidir: seçim zorunlu ise, bu tamamdır - ancak seçim isteğe bağlıysa değil.
Robert Mark Bram

2
Explorer11 display:nonestili yok sayar .
T30

1
:invalidBen yaptım önce dışarı çalışmak için @ Mattw için Kudos .
William Isted

3
Ayrıca bu kemandacolor olduğu gibi destekleyici tarayıcılardaki seçeneklerin "sıfırlanması" için bir kural ekleyebilirsiniz . Bu, engellenen kişinin bir yer tutucu olduğunu güçlendirmeye yardımcı olacaktır . (Düzenleme: MattW'nin cevabında bunu zaten kapsadığını görüyorum)option
Shaggy

251

Gerekli bir alan için, modern tarayıcılarda saf bir CSS çözümü vardır:

select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}
<select required>
  <option value="" disabled selected>Select something...</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>


7
Şaşırtıcı - en basit olan cevaptı (henüz hiçbir upvotes olmadan) ve en iyi şekilde çalıştı. Teşekkürler! Umarım bu cevap en üste çıkacaktır.
Dan Nissenbaum

2
@DanNissenbaum Oyuna çok geç kaldım, artı requiredçalışmak gerekiyor, bu yüzden alanın isteğe bağlı olmasını istiyorsanız bir faydası yok.
MattW

1
Bir yana, :requiredseçici IE8 ve altında desteklenmez. :invalidSeçici IE9 ve aşağıda desteklenmez. quirksmode.org/css/selectors
Matt Wagner

4
Gereksiz bir seçim için çözüm yok mu?
user3494047

1
@ user3494047 bu yaklaşımla değil - requiredkoşul, :invalidyer tutucu seçildiğinde tarayıcının sözde sınıfı uygulamasına neden olan durumdur . [value=""]kullanıcı etkileşimi tarafından güncellenen değer özelliğidir, ancak CSS sözdizimi (var olmayan) bir özniteliğe atıfta bulunur .
MattW

105

Bunun gibi bir şey:

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:

#choice option { color: black; }
.empty { color: gray; }

JavaScript:

$("#choice").change(function () {
    if($(this).val() == "0") $(this).addClass("empty");
    else $(this).removeClass("empty")
});

$("#choice").change();

Çalışma örneği: http://jsfiddle.net/Zmf6t/


8
tam olarak son zamanlarda yaptığım şey bu. ancak klavye yoluyla bir seçenek seçildiğinde (oklar veya harf kısayolları kullanılarak) değişiklik gerçekleşmesi için bir keyup işleyici ekledim jsfiddle.net/Zmf6t/131
Radu

Bu beni doğru yola koydu ... ancak ben = = "(tırnaklar arasında hiçbir şey) yaptı, böylece gönder düğmesi tıklandığında, hala ilk seçeneği doğrulayamadı ve sizi bilgilendiren bir tarayıcı pop-up görünür bir seçenek seçmek için ... teşekkürler @Albireo
Craig Wayne

Değişiklik işlevini neden açıkça çağırdınız?
Foreever

@Daha sonra CSS sınıfını select'un change olay işleyicisine ayarladığım için, kontrol oluşturulduğunda olayı manuel olarak yükseltmezseniz stil uygulanmaz (yalnızca kullanıcı değeri manuel olarak değiştirdiğinde uygulanır).
Albireo

Bu JQeury 3.4.1 üzerinde çalışmıyor
geobudex

45

Ben sadece optionaşağıdaki gibi gizli bir özellik ekledim . Benim için iyi çalışıyor.

<select>
  <option hidden>Sex</option>
  <option>Male</option>
  <option>Female</option>
</select>


2
Sadece kayıt için, bu benim için işe yaramaz (Win10'da Chrome).
Chris Rae

Ama ayarını kaldıramazsınız. Birini seçersiniz ancak fikrinizi değiştirirseniz sıfırlayamazsınız.
17:19

Evet! Ancak yine de formun içinde kullanıcı bu seçeneklerden herhangi birini seçmelidir. Zorunlu bir alan değilse, gizli özniteliği kaldırın.
Ajithkumar S

35

Aşağıdaki çözüm, JavaScript olmadan Firefox'ta da çalışır:

option[default] {
  display: none;
}
<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>


26

Aynı sorunu yaşadım ve arama yaparken bu soruya rastladım ve benim için iyi bir çözüm bulduktan sonra, bazılarının bundan yararlanabilmesi için bunu sizinle paylaşmak istiyorum.

İşte burada:

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

JavaScript:

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

Müşteri ilk seçimi yaptıktan sonra gri renge gerek yoktur, bu nedenle JavaScript kodu sınıfı kaldırır place_holder.

@ User1096901 sayesinde, Internet Explorer tarayıcısı için bir geçici çözüm olarak place_holder, ilk seçeneğin tekrar seçilmesi durumunda sınıfı tekrar ekleyebilirsiniz :)


2
Bazı tarayıcılarda hala ekranı seçebilir: hiçbir seçenek, gizli olmadığından.
Srneczek

Bunun için geçici çözüm, ilk seçeneğin seçilmesi durumunda tekrar "place_holder" sınıfı eklemektir :)
eklemektir

23

Herhangi bir JavaScript veya CSS'ye gerek yoktur, sadece üç özellik vardır:

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

O seçeneği hiç göstermez; yalnızca seçeneğin değerini varsayılan olarak ayarlar.

Ancak, geri kalanıyla aynı renkte bir yer tutucuyu sevmiyorsanız, bu şekilde satır içi olarak düzeltebilirsiniz:

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

Açıkçası, işlevleri ve en azından seçmenin CSS'sini ayrı dosyalara ayırabilirsiniz.

Not: onload işlevi bir yenileme hatasını düzeltir.


Gizli seçenek tek
seçenekse

ancak neden yalnızca tek bir seçenek içeren bir açılır menünüz olsun?
Jacob Schneider

Sekmeli bir pop-up var ve tab3 açılır menüsü görüntülenen tab2 giriş alır. Cevabınız iyi ve bu bir köşe vakası, ancak varsayılan değerin ilk seçenek olarak görünmesini beklerdim, bunun yerine boş bir açılır liste alırsınız. Buraya bakın: jsfiddle.net/n66L7sza
Eridanis

Bu iyi bir nokta, bu durumda açılır listenin uzunluğunu tarayabilirsiniz, eğer sıfırsa, gizli özelliği kaldırın
Jacob Schneider

MacOS'taki Google Chrome 65.0.3325.181'de bu düzgün çalışmıyor gibi görünüyor, gizli girişi göstermiyor ve altındaki girişi seçiyor.
Jamie H

19

Kullanıcı belirli seçeneklerde yer tutucuyu görmemelidir. Bu hiddenözelliği yer tutucu seçeneği için kullanmanızı öneririm ve selectedbu seçenek için özelliğe ihtiyacınız yoktur . Sadece ilk olarak koyabilirsiniz.

select:not(:valid) {
  color: #999;
}
<select required>
    <option value="" hidden>Select your option</option>
    <option value="0">First option</option>
    <option value="1">Second option</option>
</select>


2
veya select:invalidda geçerlidir.
elquimista

2
En azından Chrome'da, liste arasında yer tutucu metni içermediğinden bunu tavsiye ederim.
JoeRaid

Stilin onsuz çalışmadığını unutmayınrequired
akmalhakimi1991

18

Burada David'in cevabını değiştirdim (kabul edilen cevap). Cevabına, engelli koydu veoption etikete , ancak gizli etiketi de koyduğumuzda çok daha iyi görünecek.

optionEtikete fazladan gizli bir özellik eklenmesi , "Durr" seçeneği seçildikten sonra "Seçenekinizi seçin" seçeneğinin yeniden seçilmesini engeller.

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


Güncelleme için teşekkürler, ancak cevap hala neden farklı göründüğünü açıklamıyor. Örneğin, bu yanıt "Durr" seçeneği seçildikten sonra "Seçenekinizi seçin" seçeneğinin yeniden seçilmesini engeller . Hangi özellik bu davranışa neden olur?
bgran

16

İşte benim:

select:focus option.holder {
  display: none;
}
<select>
    <option selected="selected" class="holder">Please select</option>
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>

</select>


Sadece <option value="" selected disabled>Please select</option>ilk seçenek olarak ekleyebilirsiniz .
sstauross

Yer tutucuyu açık gri yapmaz.
Chloe

12

Doğru cevap işaretleri görüyorum, ama hepsini bir araya getirmek için bu benim çözümüm olacak:

select {
  color: grey;
}

option {
  color: black;
}

option[default] {
   display: none;
}
<select>
    <option value="" default selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>


8
Durrseçtikten sonra gri renktedir. Bu, kapalı seçim kutusunu her zaman gri olmaya zorlar.
Chloe

9

Angular kullanıyorsanız şu şekilde gidin:

<select>
    <option [ngValue]="undefined"  disabled selected>Select your option</option>
    <option [ngValue]="hurr">Durr</option>
</select>


hiddenÖzelliği, seçeneğini açarken seçeneğin görüntülenmeyeceği şekilde ekleyebilirsiniz select. Ama bu cevap için herhangi bir şekilde teşekkürler, benim için çalıştı.
dcg

5

Bu HTML + CSSçözüm benim için çalıştı:

form select:invalid {
  color: gray;
}

form select option:first-child {
  color: gray;
}

form select:invalid option:not(:first-child) {
  color: black;
}
<form>
  <select required>
    <option value="">Select Planet...</option>
    <option value="earth">Earth</option>
    <option value="pandora">Pandora</option>
  </select>
</form>

İyi şanslar...


JQuery
3.4.1'de

5

JavaScript'te başka bir olasılık:

 $('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

Kabul edilen çözümü seviyorum JavaScript olmadan harika çalışıyor.

Kontrollü seçilmiş bir React Bileşeni için bu cevabı nasıl benimsediğimi eklemek istiyorum , çünkü bunu anlamaya çalışmak için birkaç deneme yaptım. Onu dahil etmek react-selectve onunla yapmak gerçekten kolay olurdu , ancak söz konusu proje için sağlamadığım bu havuzun sağladığı şaşırtıcı işlevselliğe ihtiyacınız olmadıkça, pakete daha fazla kilobayt eklemeye gerek yok. Dikkat, react-selectyer tutucuları çeşitli inputsve htmlelemanlardan oluşan karmaşık bir sistem aracılığıyla seçer .

React'te, denetlenen bir bileşen için selectedözniteliği seçeneklerinize ekleyemezsiniz . Reaksiyon, seçimin durumunu value,select , değerin seçeneklerin içindeki değer özelliklerinden biriyle eşleşmesi gereken bir değişiklik işleyicisiyle birlikte, kendisi .

Örneğin,

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

Uygunsuz olacağından ve aslında selectedözniteliği seçeneklerden birine eklemek için bir hata göndereceğinden , ne olacak?

Bunu düşündüğünüzde cevap basittir. Biz bizim ilk istediğim için optionolmak selectedgibi disabledve hiddenbiz üç şey yapması gerekir:

  1. hiddenVe disabledözniteliğini ilk tanımlı öğeye ekleyin option.
  2. İlkinin değerini optionboş bir dize olarak ayarlayın.
  3. selectBoş bir dize olması için değerini sıfırlayın .
state = { selectValue = "" } // State or props or their equivalent

// In the render function
<select value={this.state.selectValue} onChange={this.handleChange} required={true}>
    <option key="someKey" value="" disabled="disabled" hidden="hidden">Select from Below</option>
    {renderOptions()}
</select>

Şimdi seçimi yukarıda belirtildiği gibi biçimlendirebilirsiniz (veya classNameisterseniz bir yoluyla ).

select:invalid { color: gray; }

3

[type="text"]Seçili Öğeler için Giriş Stili Yer Tutucusu

Aşağıdaki çözüm bir yer tutucuyu bir input[type="text"]öğeyle ilgili olduğu için taklit eder :

$('.example').change(function () {
  $(this).css('color', $(this).val() === '' ? '#999' : '#555');
});
.example {
  color: #999;
}

.example > option {
  color: #555;
}

.example > option[value=""] {
  color: #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="example">
  <option value="">Select Option</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>


3

Bu HTML parçası için seçilene kadar SELECT gri olmasını istedim:

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

Bu CSS tanımlarını ekledim:

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

Chrome / Safari'de ve belki de diğer tarayıcılarda beklendiği gibi çalışır, ancak kontrol etmedim.


3

İşte güzel çalışan bir CSS çözümü. İçerik, içerdiği elemandan sonra eklenir (ve kaba göre kesinlikle konumlandırılır) ( üzerinden: sözde sınıftan sonra ).

Metnini , yönergeyi ( attr (yer tutucu) ) kullandığım yerde tanımladığım yer tutucu özelliğinden alır . Başka bir önemli faktör işaretçi olaylardır: yok - bu, yer tutucu metne tıklamanın seçime geçmesine izin verir. Aksi takdirde, kullanıcı metni tıklarsa açılır.

Ben eklemek .empty benim seçme yönergede sınıf kendim ama normalde kaldırır / o açısal ekler bulmak .ng boş (benim kod örneğinde köşeli 1.2 sürümünü enjekte ediyorum için olduğunu sanıyorum) benim için.

(Örnek ayrıca, kendi özel girişlerinizi oluşturmak için HTML öğelerinin AngularJS'ye nasıl sarılacağını gösterir)

var app = angular.module("soDemo", []);
app.controller("soDemoController", function($scope) {
  var vm = {};
  vm.names = [{
      id: 1,
      name: 'Jon'
    },
    {
      id: 2,
      name: 'Joe'
    }, {
      id: 3,
      name: 'Bob'
    }, {
      id: 4,
      name: 'Jane'
    }
  ];
  vm.nameId;
  $scope.vm = vm;
});

app.directive('soSelect', function soSelect() {
  var directive = {
    restrict: 'E',
    require: 'ngModel',
    scope: {
      'valueProperty': '@',
      'displayProperty': '@',
      'modelProperty': '=',
      'source': '=',
    },
    link: link,
    template: getTemplate
  };
  return directive;


  /////////////////////////////////
  function link(scope, element, attrs, ngModelController) {
    init();
    return;


    ///////////// IMPLEMENTATION

    function init() {
      initDataBinding();
    }


    function initDataBinding() {
      ngModelController.$render = function() {
        if (scope.model === ngModelController.$viewValue) return;
        scope.model = ngModelController.$viewValue;
      }

      scope.$watch('model', function(newValue) {
        if (newValue === undefined) {
          element.addClass('empty');
          return;
        }
        element.removeClass('empty');
        ngModelController.$setViewValue(newValue);
      });
    }
  }


  function getTemplate(element, attrs) {
    var attributes = [
      'ng-model="model"',
      'ng-required="true"'
    ];

    if (angular.isDefined(attrs.placeholder)) {
      attributes.push('placeholder="{{placeholder}}"');
    }

    var ngOptions = '';

    if (angular.isDefined(attrs.valueProperty)) {
      ngOptions += 'item.' + attrs.valueProperty + ' as ';
    }

    ngOptions += 'item.' + attrs.displayProperty + ' for item in source';
    ngOptions += '"';
    attributes.push('ng-options="' + ngOptions + '"');

    var html = '<select ' + attributes.join(' ') + '></select>';

    return html;
  }
});
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="soDemo" ng-controller="soDemoController">
  <so-select value-property="id" display-property="name" source="vm.names" ng-model="vm.nameId" placeholder="(select name)"></so-select>
</div>


3

Bunlardan hiçbirini şu anda çalıştıramadım, çünkü benim için (1) gerekli değil ve (2) varsayılan seçilebilirliğe geri dönme seçeneğine ihtiyaç duyuyor. Eğer jQuery kullanıyorsanız ağır bir seçenek:

var $selects = $('select');
$selects.change(function () {
  var option = $('option:default', this);
  if(option && option.is(':selected')) {
    $(this).css('color', '#999');
  }
  else {
    $(this).css('color', '#555');
  }
});

$selects.each(function() {
  $(this).change();
});
option {
    color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="in-op">
    <option default selected>Select Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>


Teşekkürler, dediğin gibi bu benim için en iyisiydi ... select öğesi gerekli.
Mousa Alfhaily

3

Ben sadece HTML / CSS çözümlerinden memnun değilim, bu yüzden selectJavaScript kullanarak özel bir tane oluşturmaya karar verdim .

Bu son 30 dakika içinde yazdığım bir şey, bu yüzden daha da geliştirilebilir.

Yapmanız gereken tek şey, birkaç veri özniteliğine sahip basit bir liste oluşturmaktır. Kod, listeyi otomatik olarak seçilebilir bir açılır listeye dönüştürür. Ayrıca input, seçilen değeri tutmak için bir gizli ekler , böylece bir formda kullanılabilir.

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>

Çıktı:

<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 olması gereken öğenin metni grileşir. Kullanıcının seçimini geri almak istemesi durumunda yer tutucu seçilebilir. Ayrıca CSS kullanarak, tüm dezavantajları selectaşılabilir (örn. Seçeneklerin şekillendirilememesi).


Güncelleme : Bunu geliştirdim (yukarı / aşağı / enter tuşlarını kullanarak seçim), çıktıyı biraz toparladım ve bunu bir nesneye dönüştürdüm. Akım çıkışı:

<div class="li-select-container">
    <input type="text" readonly="" placeholder="Role" title="Role">
    <span class="arrow"></span>
    <ul class="select">
        <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>

Başlatma:

new Liselect(document.getElementsByTagName("ul")[0]);

Daha fazla inceleme için: JSFiddle , GitHub (yeniden adlandırılmış).


Güncelleme: Bunu tekrar yazdım. Bir liste kullanmak yerine, bir seçim kullanabiliriz. Bu şekilde JavaScript olmadan da çalışır (devre dışı bırakılmışsa).

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

Çıktı:

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


2

Form doğrulamasına ihtiyacınız var ve modern tarayıcılar bunu sıfırdan sunuyor.

Bu nedenle kullanıcının alanı seçemeyeceğine dikkat etmeniz gerekmez. Çünkü bunu yaparken, tarayıcı doğrulaması ona yanlış bir seçim olduğunu söyleyecektir.

Tarayıcı doğrulama işlevi checkValidity () yerleşik .

Bootstrap'ın da güzel bir örneği var.

HTML

<form class="needs-validation">
  <select required>
    <option value="">Please select an option</option>
    <option value="1">Foo</option>
    <option value="2">Bar</option>
  </select>
<form>

JavaScript

form = document.getElementByClassName('needs-validation');
if(form.checkValidity() === true) {
  //form validation succeeded
} else {
  //form validation failed
}

1

Sen kullanmadan yapabilirsiniz Javascriptyalnızca kullanarak HTMLSen kümesi varsayılan seçme seçeneği gerekir disabled=""ve selected=""basıp etiketi required="".kullanıcı bir seçeneği seçmeden formu göndermek için izin vermez Tarayıcı.

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

Bu, tüm seçim elemanının bir seçenek seçilene kadar grileşmesine neden olarak, istenmeyen bir davranışa neden olur.
wickedchild

1

Gelen açısal biz yer tutucu olduğu gibi bir seçenek ekleyebilir gizli olabilir seçenek açılır listesinde. Tarayıcı açılır menüsünün yerine arka plan olarak özel bir açılır simge de ekleyebiliriz .

hile etmektir tutucudur etkinleştirmek sadece css değeri seçilmemiş

/ ** Bileşen Şablonum * /

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

/ ** Bileşenim.TS * /

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

/**global.scss*/

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

    /*For moz*/
    -moz-appearance: none;
    /* IE10 */
    &::-ms-expand {
      display: none;
    }
    /*For chrome*/
    -webkit-appearance:none;
    &.placeholder {
      opacity: 0.7;
      color: theme-color('mutedColor');
    }
    option {
      color: black;
    }
  }
}

1

Açısal 2 için çözüm

Seçimin üstünde bir etiket oluşturun

<label class="hidden-label" for="IsActive"
    *ngIf="filterIsActive == undefined">Placeholder text</label>
<select class="form-control form-control-sm" type="text" name="filterIsActive"
    [(ngModel)]="filterIsActive" id="IsActive">
    <option value="true">true</option>
    <option value="false">false</option>
</select>

ve üstüne yerleştirmek için CSS uygulayın

.hidden-label {
    position: absolute;
    margin-top: .34rem;
    margin-left: .56rem;
    font-style: italic;
    pointer-events: none;
}

pointer-events: none bir seçeneği seçtiğinizde gizlenen etiketi tıkladığınızda seçimi görüntülemenizi sağlar.


1

İşte katkım. 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;
}

Sunucu kodunu değiştirerek ve yalnızca sınıf stillerini özelliğin geçerli değerine bağlı olarak ayarlayarak yalnızca CSS kullanmak mümkündür, ancak bu şekilde daha kolay ve temiz görünür.

$('select').on('change', function() {
  if ($(this).val()) {
    return $(this).css('color', 'black');
  } else {
    return $(this).css('color', 'gray');
  }
});

$('select').change();
    select option {
      color: black;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="user[country_id]" id="user_country_id">
  <option value="">Country</option>
                      <option value="231">United States</option>
                      <option value="1">Andorra</option>
                      <option value="2">Afghanistan</option>
                      <option value="248">Zimbabwe</option></select>

select option:first-childAçıldığında yer tutucuyu gri tutmak için daha fazla CSS ( ) ekleyebilirsiniz , ancak bunu umursamadım.


1

Bunu bir değişiklik için deneyin:

$("select").css("color", "#757575");
$(document).on("change", "select", function(){
    if ($(this).val() != "") {
        $(this).css("color", "");
    } 
    else {
        $(this).css("color", "#757575");
    }
});

1

İşte bir çalışma örneği saf JavaScript bunu başarmak için nasıl kolları ilk tıklamadan sonra seçenekler rengi:

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

1

MattW'nin cevabına dayanarak , geçerli bir seçim yapıldıktan sonra, yalnızca yer tutucu seçiliyken (ve bu nedenle: geçersiz) koşullu olarak gizleyerek açılır menüde yer tutucu seç seçeneğini görünür hale getirebilirsiniz.

select:required:invalid {
  color: gray;
}
select:invalid > option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}
<select required>
    <option value="" disabled selected>Select something...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>


0

Albireo'nun yanıtına dayanarak , bu sürüm jQuery kullanmaz ve CSS özgüllüğü daha iyidir.

const triggerEvent = (el, eventName) => {
  let event = document.createEvent('HTMLEvents')
  event.initEvent(eventName, true, false)
  el.dispatchEvent(event)
}

let select = document.querySelector('.placeholder-select')
select.addEventListener('change', (e) => {
  e.target.classList[e.target.value == 0 ? 'add' : 'remove']('empty')
})
triggerEvent(select, 'change')
.placeholder-select option {
  color: #000000;
}
.placeholder-select option:first-child {
  color: #444444;
  font-style: italic;
  font-weight: bold;
}
.placeholder-select.empty {
  color: #7F7F7F;
}
<select class="placeholder-select">
  <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>

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.