it-swarm.asia

كيف يمكنني إنشاء عنصر نائب لمربع "تحديد"؟

أنا أستخدم العناصر النائبة لإدخال النص الذي يعمل بشكل جيد. لكنني أرغب في استخدام عنصر نائب لصناديق الاختيار الخاصة بي أيضًا. Ofcourse يمكنني فقط استخدام هذا الكود:

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

لكن "حدد خيارك" باللون الأسود بدلاً من lightgrey. لذلك يمكن أن يكون حلي قائمًا على CSS. مسج على ما يرام أيضا.

هذا يجعل الخيار رماديًا فقط في القائمة المنسدلة (وذلك بعد النقر فوق السهم):

option:first {
    color: #999;
}

تحرير: السؤال هو: كيف ينشئ الأشخاص عناصر نائبة في مربعات الاختيار؟ ولكن بالفعل تم الرد عليها ، هتافات.

واستخدام هذا يؤدي إلى أن تكون القيمة المحددة رمادية دائمًا (حتى بعد تحديد خيار حقيقي):

select {
    color:#999;
}
1305
Thomas

ماذا عن غير CSS - لا javascript/jQuery الإجابة؟

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

فقط تعثرت على هذا السؤال ، إليك ما يعمل في FireFox و Chrome (على الأقل)

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

يتوقف الخيار معطل عن تحديد <option> مع كل من الماوس ولوحة المفاتيح ، في حين أن استخدام 'display:none' فقط يسمح للمستخدم بالتحديد عبر أسهم لوحة المفاتيح. نمط 'display:none' يجعل مربع القائمة يبدو "لطيفًا".

ملاحظة: استخدام سمة value فارغة في خيار "العنصر النائب" يتيح التحقق من الصحة (السمة المطلوبة) للتغلب على "العنصر النائب" ، لذلك إذا لم يتم تغيير الخيار ولكن مطلوب ؛ يجب على المتصفح مطالبة المستخدم باختيار خيار من القائمة.

التحديث (يوليو 2015):

تم تأكيد هذه الطريقة في العمل في المتصفحات التالية:

  • جوجل كروم - v.43.0.2357.132
  • Mozilla Firefox - الإصدار 39.0
  • Safari - v.8.0.7 (العنصر النائب مرئي في القائمة المنسدلة ولكنه غير قابل للاختيار)
  • Microsoft Internet Explorer - الإصدار 11 (العنصر النائب مرئي في القائمة المنسدلة ولكن لا يمكن تحديده)
  • Project Spartan - v.15.10130 (عنصر نائب مرئي في القائمة المنسدلة ولكنه غير قابل للاختيار)

التحديث (أكتوبر 2015):

أزلت style="display: none" لصالح سمة HTML5 hidden التي تتمتع بدعم واسع. يحتوي عنصر hidden على سمات مشابهة مثل display: none في Safari ، IE ، (يحتاج Project Spartan إلى التحقق) حيث يكون option مرئيًا في قائمة منسدلة ولكن غير قابل للتحديد.

التحديث (يناير 2016):

عندما يكون عنصر selectrequired ، فإنه يسمح باستخدام فئة :invalid CSS الزائفة التي تتيح لك تصميم عنصر select عندما يكون في حالة "عنصر نائب". :invalid يعمل هنا بسبب القيمة الفارغة في العنصر النائب option.

بمجرد تعيين قيمة ، سيتم إسقاط الفئة الزائفة :invalid. يمكنك أيضًا استخدام :valid اختياريًا إذا كنت ترغب في ذلك.

تدعم معظم المتصفحات هذه الفئة الزائفة. IE10 +. هذا يعمل بشكل أفضل مع عناصر select ذات التصميم المخصص ؛ في بعض الحالات ، مثل (Mac في Chrome/Safari) ، ستحتاج إلى تغيير المظهر الافتراضي لمربع select بحيث يتم عرض أنماط معينة ، مثل background-color ، color. يمكنك العثور على بعض الأمثلة والمزيد حول التوافق على developer.mozilla.org .

العنصر الأصلي مظهر Mac في Chrome:

Select box native Mac in Chrome

استخدام عنصر الحدود المعدل في Mac في Chrome:

Altered select box Mac in Chrome

717
William Isted

بالنسبة للحقل المطلوب ، يوجد حل CSS خالص في المتصفحات الحديثة:

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

شيء من هذا القبيل ربما؟

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

جافا سكريبت:

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

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

مثال العمل: http://jsfiddle.net/Zmf6t/

100
Albireo

أضفت فقط سمة خفية في خيار مثل أدناه ، وأنها تعمل بشكل جيد بالنسبة لي.

<select>
  <option hidden>Sex</option>
  <option>Male</option>
  <option>Female</option>
</select>
40
Ajithkumar S

يعمل هذا الحل في FireFox أيضًا:
بدون أي شبيبة.

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>
29
Dani-Br

لقد واجهت نفس المشكلة وأثناء البحث صادفت هذا السؤال ، وبعد أن وجدت حلاً جيدًا بالنسبة لي ، أود أن أشاركه معكم أيها الرجال في حال تمكن أحدهم من الاستفادة منه. ومن هنا: 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");
});

بعد أن يقوم العميل أولاً بتحديد لا حاجة للون الرمادي لذلك JS يزيل فئة place_holder. آمل أن يكون هذا يساعد شخص ما :)

التحديث: بفضل @ user1096901 ، كحل بديل لمتصفح IE ، يمكنك إضافة فئة place_holder مرة أخرى في حالة تحديد الخيار الأول مرة أخرى :)

23
rramiii

ليست هناك حاجة لأي JS أو CSS ، فقط 3 سمات:

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

لا يعرض الخيار على الإطلاق ، فقط يعيّن قيمة الخيار كقيمة افتراضية.

ومع ذلك ، إذا كنت فقط لا تحب عنصرًا نائبًا بنفس لون البقية ، فيمكنك إصلاحه بشكل مضمّن مثل هذا:

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

من الواضح ، يمكنك فصل الوظائف و CSS المحدد على الأقل في ملفات منفصلة.

ملاحظة: تقوم الدالة onload بتصحيح خطأ في التحديث.

19
Jacob Schneider

أرى علامات على الإجابات الصحيحة ، لكن لكي أجمعها كلها ، سيكون هذا هو الحل الذي أقدمه.

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

هنا قمت بتعديل ديفيد الإجابة (الإجابة المقبولة). على إجابته ، وضع السمة المعطلة والمختارة على علامة خيار ، ولكن عندما نضع أيضًا علامة مخفية ، ستبدو أفضل كثيرًا. بإضافة سمة مخفية إضافية على علامة الخيار ، سيمنع خيار "تحديد الخيار الخاص بك" من إعادة التحديد بعد تحديد خيار "Durr".

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

تلك هي خاصتي

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>
13
Will Wang

يجب ألا يرى المستخدم العنصر النائب في خيارات التحديد. أقترح استخدام سمة hidden لعنصر نائب ، ولن تحتاج إلى سمة selected لهذا الخيار ، يمكنك فقط وضعها كأول.

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>
6
Roman Yakoviv

إذا كنت تستخدم الزاوي الذهاب مثل هذا

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

احتمال آخر في JS:

 $('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
Jean-philippe Emond

إليك حلCSSيعمل بشكل جميل. تتم إضافة المحتوى (ووضعه بشكل مطلق بالنسبة للحاوية) بعد العنصر المحتوي ( عبر: بعد فئة الزائفة ). تحصل على نصها من سمة العنصر النائب التي قمت بتحديدها حيث استخدمت التوجيه ( attr (العنصر النائب) ). هناك عامل رئيسي آخر هو أحداث المؤشر: لا شيء - يسمح هذا للنقرات على نص العنصر النائب بالانتقال إلى التحديد. وإلا فلن تسقط إذا نقر المستخدم على النص.

أقوم بإضافة. فارغة صنفًا بنفسي في توجيه التحديد الخاص بي ، لكن عادةً أجد أن الزاوي يضيف/يزيل .ng-فارغة بالنسبة لي (أفترض أنه ب/ج أنا حقن الإصدار 1.2 من Angular في نموذج الكود الخاص بي)

(يوضح النموذج أيضًا كيفية التفاف عناصر HTML في angularJS لإنشاء مدخلات مخصصة خاصة بك)

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

لم أتمكن من الحصول على أيٍّ منها للعمل حاليًا ، لأنه (1) ليس مطلوبًا و (2) بحاجة إلى خيار للعودة إلى الوضع الافتراضي للاختيار. إذاً هذا هو الخيار الثقيل إذا كنت تستخدم مسج:

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>
2
Eric G

هذا الحل HTML + CSS يعمل لي:

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>

حظا سعيدا...

2
Akash

إدخال [type="text"] عنصر نائب نمط لعناصر تحديد

يحاكي الحل التالي عنصرًا نائبًا لأنه يرتبط بعنصر input[type="text"]:

$('.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>
1
Grant Miller

يمكنك القيام بذلك دون استخدام Javascript باستخدام HTML فقط. تحتاج إلى تعيين خيار التحديد الافتراضي disabled="" و selected="" وتحديد علامة required="". لا يسمح المتصفح للمستخدم بإرسال النموذج دون تحديد خيار.

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

إليك مثال مثال عملي كيفية تحقيق ذلك باستخدام javascript الخالص الذي يتعامل مع لون الخيارات بعد النقر الأول:

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

أردت أن يكون SELECT رماديًا حتى يتم تحديده لهذا الجزء من HTML:

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

لقد أضفت تعريفات CSS هذه:

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

يعمل كما هو متوقع في Chrome/Safari ، وربما أيضًا في المتصفحات الأخرى لكنني لم أتحقق منها.

1
fbparis

جرب هذا التغيير

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

أنا لست راضياً عن حلول HTML/CSS فقط ، لذلك قررت إنشاء select مخصص باستخدام JS.

هذا شيء كتبته في الدقائق الثلاثين الماضية ، وبالتالي يمكن تحسينه أكثر.

كل ما عليك القيام به هو إنشاء قائمة بسيطة مع بعض سمات البيانات. يقوم الكود تلقائيًا بتحويل القائمة إلى قائمة منسدلة قابلة للتحديد. ويضيف أيضًا input للاحتفاظ بالقيمة المحددة ، بحيث يمكن استخدامها في نموذج.

إدخال:

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

انتاج:

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

نص العنصر الذي من المفترض أن يكون عنصرًا نائبًا باللون الرمادي. يمكن تحديد العنصر النائب ، في حالة رغبة المستخدم في التراجع عن اختياره. باستخدام CSS أيضًا ، يمكن التغلب على جميع عيوب select (على سبيل المثال ، عجز تصميم الخيارات).

// helper function to create elements faster/easier
// https://github.com/akinuri/js-lib/blob/master/element.js
var elem = function(tagName, attributes, children, isHTML) {
  let parent;
  if (typeof tagName == "string") {
    parent = document.createElement(tagName);
  } else if (tagName instanceof HTMLElement) {
    parent = tagName;
  }
  if (attributes) {
    for (let attribute in attributes) {
      parent.setAttribute(attribute, attributes[attribute]);
    }
  }
  var isHTML = isHTML || null;
  if (children || children == 0) {
    elem.append(parent, children, isHTML);
  }
  return parent;
};
elem.append = function(parent, children, isHTML) {
  if (parent instanceof HTMLTextAreaElement || parent instanceof HTMLInputElement) {
    if (children instanceof Text || typeof children == "string" || typeof children == "number") {
      parent.value = children;
    } else if (children instanceof Array) {
      children.forEach(function(child) {
        elem.append(parent, child);
      });
    } else if (typeof children == "function") {
      elem.append(parent, children());
    }
  } else {
    if (children instanceof HTMLElement || children instanceof Text) {
      parent.appendChild(children);
    } else if (typeof children == "string" || typeof children == "number") {
      if (isHTML) {
        parent.innerHTML += children;
      } else {
        parent.appendChild(document.createTextNode(children));
      }
    } else if (children instanceof Array) {
      children.forEach(function(child) {
        elem.append(parent, child);
      });
    } else if (typeof children == "function") {
      elem.append(parent, children());
    }
  }
};


// initialize all selects on the page
$("ul.select").each(function() {
  var parent    = this.parentElement;
  var refElem   = this.nextElementSibling;
  var container = elem("div", {"class": "ul-select-container"});
  var hidden    = elem("input", {"type": "hidden", "name": this.dataset.name, "class": "hidden"});
  var selected  = elem("div", {"class": "selected placeholder"}, [
    elem("span", {"class": "text"}, this.dataset.placeholder),
    elem("span", {"class": "icon"}, "&#9660;", true),
  ]);
  var placeholder = elem("li", {"class": "placeholder"}, this.dataset.placeholder);
  this.insertBefore(placeholder, this.children[0]);
  container.appendChild(hidden);
  container.appendChild(selected);
  container.appendChild(this);
  parent.insertBefore(container, refElem);
});

// update necessary elements with the selected option
$(".ul-select-container ul li").on("click", function() {
  var text     = this.innerText;
  var value    = this.dataset.value || "";
  var selected = this.parentElement.previousElementSibling;
  var hidden   = selected.previousElementSibling;
  hidden.value = selected.dataset.value = value;
  selected.children[0].innerText = text;
  if (this.classList.contains("placeholder")) {
    selected.classList.add("placeholder");
  } else {
    selected.classList.remove("placeholder");
  }
  selected.parentElement.classList.remove("visible");
});

// open select dropdown
$(".ul-select-container .selected").on("click", function() {
  if (this.parentElement.classList.contains("visible")) {
    this.parentElement.classList.remove("visible");
  } else {
    this.parentElement.classList.add("visible");
  }
});

// close select when focus is lost
$(document).on("click", function(e) {
  var container = $(e.target).closest(".ul-select-container");
  if (container.length == 0) {
    $(".ul-select-container.visible").removeClass("visible");
  }
});
.ul-select-container {
  width: 200px;
  display: table;
  position: relative;
  margin: 1em 0;
}
.ul-select-container.visible ul {
  display: block;
  padding: 0;
  list-style: none;
  margin: 0;
}
.ul-select-container ul {
  background-color: white;
  border: 1px solid hsla(0, 0%, 60%);
  border-top: none;
  -webkit-user-select: none;
  display: none;
  position: absolute;
  width: 100%;
  z-index: 999;
}
.ul-select-container ul li {
  padding: 2px 5px;
}
.ul-select-container ul li.placeholder {
  opacity: 0.5;
}
.ul-select-container ul li:hover {
  background-color: dodgerblue;
  color: white;
}
.ul-select-container ul li.placeholder:hover {
  background-color: rgba(0, 0, 0, .1);
  color: initial;
}
.ul-select-container .selected {
  background-color: white;
  padding: 3px 10px 4px;
  padding: 2px 5px;
  border: 1px solid hsla(0, 0%, 60%);
  -webkit-user-select: none;
}
.ul-select-container .selected {
  display: flex;
  justify-content: space-between;
}
.ul-select-container .selected.placeholder .text {
  color: rgba(0, 0, 0, .5);
}
.ul-select-container .selected .icon {
  font-size: .7em;
  display: flex;
  align-items: center;
  opacity: 0.8;
}
.ul-select-container:hover .selected {
  border: 1px solid hsla(0, 0%, 30%);
}
.ul-select-container:hover .selected .icon {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

<ul class="select" data-placeholder="Sex" data-name="sex">
  <li data-value="male">Male</li>
  <li data-value="female">Female</li>
</ul>

تحديث : لقد قمت بتحسين هذا (التحديد باستخدام مفاتيح أعلى/أسفل/إدخال). رتبت الإخراج قليلا وتحولت إلى كائن. الانتاج الحالي:

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

التهيئة:

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

لمزيد من الفحص: JSFiddle ،  جيثب (إعادة تسمية).


تحديث: أعد كتابة هذا مرة أخرى. بدلاً من استخدام قائمة ، يمكننا فقط استخدام تحديد. بهذه الطريقة ستعمل حتى بدون JS (في حالة تعطيلها).

إدخال:

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

انتاج:

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

أحب الحل المقبول أعلاه ويعمل بشكل رائع بدون جافا سكريبت.

أريد فقط إضافة كيفية تبني هذه الإجابة لـ مكون التفاعل React Component المختار ، لأنه استغرق مني بضع محاولات لمعرفة ذلك. سيكون من السهل جدًا دمج react-select مع ذلك ، ولكن ما لم تكن بحاجة إلى الوظيفة المذهلة التي يوفرها هذا الريبو ، والتي لا أحتاجها للمشروع المعني ، فليست هناك حاجة لإضافة المزيد من كيلوبايت إلى الحزمة الخاصة بي. ملاحظة ، react-select يعالج العناصر النائبة في التحديدات من خلال نظام معقد من عناصر inputs و html المختلفة.

في React ، لمكون عنصر تحكم ، لا يمكنك إضافة سمة selected إلى خياراتك. React يعالج حالة التحديد عبر سمة value على select نفسه ، إلى جانب معالج التغيير ، حيث يجب أن تتطابق القيمة مع إحدى سمات القيمة داخل الخيارات نفسها.

مثل ، على سبيل المثال

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

نظرًا لأنه سيكون من غير المناسب وفي الواقع سوف يلقي خطأ لإضافة السمة selected إلى أحد الخيارات ، ماذا بعد؟

الجواب بسيط بمجرد التفكير في الأمر. نظرًا لأننا نريد أن يكون option الأول selected وكذلك disabled و hidden ، فنحن بحاجة إلى القيام بثلاثة أشياء:

  1. أضف السمة hidden و disabled إلى أول option المعرفة.
  2. عيّن قيمة أول option لتكون سلسلة فارغة.
  3. قم بتهيئة قيمة select لتكون أيضًا سلسلة فارغة.
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>

يمكنك الآن تحديد التحديد كما هو موضح أعلاه (أو عبر className إذا كنت تفضل ذلك)

select:invalid { color: gray; }
0
wlh

حل Angular 2

قم بإنشاء تسمية أعلى التحديد

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

وتطبيق CSS لوضعها في القمة

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

يسمح لك pointer-events: none بعرض التحديد عند النقر فوق الملصق ، والذي يكون مخفيًا عند تحديد أحد الخيارات.

 الزاويةhtmlcss

0
edu

في Angular يمكننا إضافة خيار كعنصر نائب يمكن إخفاؤه في القائمة المنسدلة للخيار. يمكننا حتى إضافة أيقونة المنسدلة المخصصة كخلفية ذلك لتحل محل القائمة المنسدلة للمتصفح أيقونة.

خدعة is to تمكين العنصر النائب 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>

/** My Component.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;
    }
  }
}
0
Mukundhan