html ট্যাগ লিস্ট




আমি কিভাবে একটি 'নির্বাচন' বাক্সের জন্য একটি স্থানধারক করতে পারি? (16)

আপনি শুধুমাত্র HTML ব্যবহার করে Javascript ব্যবহার না করেই এটি করতে পারেন। আপনাকে ডিফল্ট নির্বাচন অপশন disabled="" এবং selected="" এবং ট্যাগটি required="". নির্বাচন করুন 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>

আমি ঠিক সূক্ষ্ম কাজ করছে যা টেক্সট ইনপুট জন্য স্থানধারক ব্যবহার করছি। কিন্তু আমি আমার পছন্দসই বাক্সগুলির জন্য একটি স্থানধারক ব্যবহার করতে চাই। আমি শুধু এই কোড ব্যবহার করতে পারেন:

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

কিন্তু 'আপনার বিকল্প নির্বাচন করুন' কালোগ্রেটের পরিবর্তে কালো। তাই আমার সমাধান সম্ভবত সিএসএস ভিত্তিক হতে পারে। jQuery খুব সূক্ষ্ম।

এটি ড্রপডাউনটিতে শুধুমাত্র ধূসর বিকল্পটি তৈরি করে (তাই তীর ক্লিক করার পরে):

option:first {
    color: #999;
}

সম্পাদনা: প্রশ্ন হল: লোকেরা কীভাবে নির্বাচনবাক্সগুলিতে স্থানধারক তৈরি করে? কিন্তু এটি ইতিমধ্যে উত্তর দেওয়া হয়েছে, cheers।

এবং নির্বাচিত ফলাফলগুলিতে এই ফলাফলগুলি সর্বদা ধূসর হচ্ছে (এমনকি একটি আসল বিকল্পটি নির্বাচন করার পরেও):

select {
    color:#999;
}

ইনপুট [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>


আমারটা এখানে

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>


আমি এইচটিএমএল / সিএসএস শুধুমাত্র সমাধানের সাথে কন্টেন্ট করছি না, তাই আমি JS ব্যবহার করে একটি কাস্টম select তৈরি করার সিদ্ধান্ত নিয়েছি।

গত 30 মিনিটের মধ্যে আমি যা লিখেছি তা এইভাবে আরও উন্নত হতে পারে।

আপনাকে যা করতে হবে তা কয়েকটি ডেটা গুণাবলী সহ একটি সহজ তালিকা তৈরি করা। কোড স্বয়ংক্রিয়ভাবে একটি নির্বাচনযোগ্য ড্রপডাউন মধ্যে তালিকা সক্রিয় করে। এটি নির্বাচিত মান ধরে রাখতে একটি লুকানো 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>

একটি স্থানধারক হতে অনুমিত আইটেমটির পাঠ ধূসর হয়ে গেছে। স্থানধারক নির্বাচনযোগ্য, যদি ব্যবহারকারী তার পছন্দ প্রত্যাহার করতে চায়। এছাড়াও সিএসএস ব্যবহার করে, 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 , GitHub (নামকরণ করা হয়েছে)।

আপডেট: আবার এই পুনঃলিখন। একটি তালিকা ব্যবহার করার পরিবর্তে, আমরা কেবল একটি নির্বাচন ব্যবহার করতে পারি। এই ভাবে এটি 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


আমি শুধু নীচে মত বিকল্প লুকানো বৈশিষ্ট্য যুক্ত, এটা আমার জন্য সূক্ষ্ম কাজ করছে।

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


আমি সঠিক উত্তর লক্ষণ দেখেছি কিন্তু এটি সব একসাথে আনতে আমার সমাধান হবে।

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>


একটি পরিবর্তন জন্য এই চেষ্টা করুন

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

একটি প্রয়োজনীয় ক্ষেত্রের জন্য, আধুনিক ব্রাউজারগুলিতে একটি বিশুদ্ধ-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>


এখানে আমি ডেভিড উত্তর পরিবর্তন (গৃহীত উত্তর) আছে। তার উত্তরে, তিনি অক্ষম এবং বিকল্প ট্যাগে নির্বাচিত বৈশিষ্ট্যটি রেখেছেন কিন্তু যখন আমরা লুকানো ট্যাগটি রাখি তখন এটি আরও ভাল দেখাবে। বিকল্প ট্যাগে অতিরিক্ত লুকানো বৈশিষ্ট্য যোগ করে, "দুরর" বিকল্পটি নির্বাচন করার পরে পুনরায় নির্বাচন করার বিকল্পটি "আপনার বিকল্প নির্বাচন করুন" বিকল্পটি আটকে দেবে।

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


এখানে একটি CSS সমাধান যা সুন্দরভাবে কাজ করে। বিষয়বস্তুটি ধারণকারী উপাদানটি (এবং শূন্য-বর্গের পরে ) এর পরে যোগ করা হয়েছে (এবং একেবারে ধারকের সাথে সম্পর্কিত)। এটি আমি নির্দেশিত স্থানধারক বৈশিষ্ট্য থেকে তার পাঠ্যটি পেয়েছি যেখানে আমি নির্দেশিকা ব্যবহার করেছি ( Attr (placeholder) )। আরেকটি মূল উপাদান হল পয়েন্টার-ইভেন্টস: none- এটি প্লেসহোল্ডার পাঠ্যকে ক্লিকের মাধ্যমে নির্বাচন করার অনুমতি দেয়। ব্যবহারকারী পাঠ্য ক্লিক করলে অন্যথায় এটি ড্রপ ডাউন হবে না।

আমি নিজের পছন্দসই নির্দেশনায় নিজেকে .empty ক্লাসটি যুক্ত করি তবে সাধারণত আমার কাছে যে কোণটি যোগ / অপসারণ করা হয়। আমার জন্য খালি থাকে (আমি মনে করি এটি b / c আমি আমার কোড নমুনায় অঙ্গুলার সংস্করণ 1.2 টি ইনজেকশন করছি)

(নমুনা এছাড়াও আপনার নিজস্ব কাস্টম ইনপুট তৈরি করতে 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>


কিভাবে একটি অ CSS সম্পর্কে - কোন জাভাস্ক্রিপ্ট / jQuery উত্তর?

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


কোন 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>

স্পষ্টতই, আপনি ফাংশন এবং কমপক্ষে সিলেক্ট সিএসএস পৃথক ফাইলগুলিতে আলাদা করতে পারেন।

দ্রষ্টব্য: Onload ফাংশন একটি রিফ্রেশ বাগ সংশোধন করে।


ব্যবহারকারী নির্বাচন অপশন মধ্যে স্থানধারক দেখতে হবে না। আমি স্থানধারক বিকল্পের জন্য 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>


যদি আপনি এঙ্গুলার ব্যবহার করেন তবে এভাবে যান

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


শুধু এই প্রশ্ন জুড়ে stumbled, এখানে কি ফায়ারফক্স এবং ক্রোম কাজ করে (অন্তত)

<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
  • মোজিলা ফায়ারফক্স - v.39.0
  • সাফারি - v.8.0.7 (স্থানধারক ড্রপডাউনটিতে দৃশ্যমান কিন্তু নির্বাচনযোগ্য নয়)
  • মাইক্রোসফ্ট ইন্টারনেট এক্সপ্লোরার - v.11 (স্থানধারক ড্রপডাউন মধ্যে দৃশ্যমান কিন্তু নির্বাচনযোগ্য নয়)
  • প্রকল্প স্পার্টান - v.15.10130 (স্থানধারক ড্রপডাউনটিতে দৃশ্যমান কিন্তু নির্বাচনযোগ্য নয়)

আপডেট (অক্টোবর 2015):

style="display: none" এইচটিএমএল এ্যাট্রিবিউটের পক্ষে hidden যার পক্ষে ব্যাপক সমর্থন রয়েছে। hidden উপাদানটির অনুরূপ বৈশিষ্ট্যাবলী রয়েছে display: none সাফারি, IE তে display: none (প্রকল্প স্পার্টানের পরীক্ষা প্রয়োজন) যেখানে ড্রপডাউনটিতে option দৃশ্যমান কিন্তু নির্বাচনযোগ্য নয়।

আপডেট (জানুয়ারী 2016):

যখন select উপাদানটি required এটি :invalid CSS ছদ্ম-শ্রেণির ব্যবহারকে অনুমোদন করে যা আপনাকে যখন "স্থানধারক" অবস্থানে select উপাদানটি শৈলী করার অনুমতি দেয়। :invalid স্থানধারক option খালি মূল্যের কারণে :invalid কাজ এখানে।

একবার একটি মান সেট করা হয়েছে :invalid ছদ্ম-শ্রেণী বাদ দেওয়া হবে। আপনি বিকল্পভাবে ব্যবহার করতে পারেন :valid যদি আপনি তাই ইচ্ছুক :valid

বেশিরভাগ ব্রাউজার এই ছদ্ম-শ্রেণী সমর্থন করে। IE10 + +। এই কাস্টম স্টাইলযুক্ত select উপাদান সঙ্গে ভাল কাজ করে; কিছু ক্ষেত্রে (অর্থাৎ ক্রোম / সাফারিতে ম্যাক) আপনাকে select বাক্সের ডিফল্ট উপস্থিতি পরিবর্তন করতে হবে যাতে কিছু শৈলী প্রদর্শিত হয় যেমন background-color , color । আপনি developer.mozilla.org এ সামঞ্জস্য সম্পর্কে কিছু উদাহরণ এবং আরও কিছু খুঁজে পেতে পারেন।

ক্রোমে নেটিভ উপাদান চেহারা ম্যাক:

Chrome এ পরিবর্তিত সীমানা উপাদান ম্যাক ব্যবহার করে:


উপরের সমস্ত সমাধানগুলির ক্ষেত্রে, কিন্তু এইচটিএমএল স্পেসের কারণে এটি সবচেয়ে বৈধ বলে মনে হচ্ছে:

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

আপডেট: এই ভুল উত্তরটির জন্য আমাকে ক্ষমা করুন, এটি অবশ্যই select উপাদানটির জন্য একটি স্থানধারক সমাধান নয়, তবে খোলা select উপাদান তালিকার অধীনে গোষ্ঠীভুক্ত বিকল্পগুলির শিরোনাম।





placeholder