উত্তর:
অক্ষম বিকল্প পদ্ধতিটি দেখতে সেরা দেখাচ্ছে এবং সেরা সমর্থিত বলে মনে হচ্ছে। আমি অপ্টগ্রুপ ব্যবহারের একটি উদাহরণও অন্তর্ভুক্ত করেছি।
অপ্টগ্রুপ (এই ভাবে কিন্ডা চুষে দেয়):
<select>
<optgroup>
<option>First</option>
</optgroup>
<optgroup label="_________">
<option>Second</option>
<option>Third</option>
</optgroup>
</select>অক্ষম বিকল্প (কিছুটা ভাল):
<select>
<option>First</option>
<option disabled>_________</option>
<option>Second</option>
<option>Third</option>
</select>এবং আপনি যদি সত্যিই অভিনব হতে চান তবে অনুভূমিক ইউনিকোড বক্স অঙ্কন চরিত্রটি ব্যবহার করুন।
(সেরা বিকল্প!)
<select>
<option>First</option>
<option disabled>──────────</option>
<option>Second</option>
<option>Third</option>
</select>disabledডানদিকে অক্ষম রেডিও বোতামের সাহায্যে বিকল্পটি প্রদর্শিত হবে ...
চেষ্টা করুন:
<optgroup label="----------"></optgroup>এটি একটি পুরানো থ্রেড, তবে যেহেতু কেউ একই রকম প্রতিক্রিয়া পোস্ট করেনি, তাই আমি এটি আমার বিচ্ছিন্ন হওয়ার পছন্দের উপায় হিসাবে যুক্ত করব।
আমি ড্যাশগুলি ব্যবহার করে এবং এর মতো কিছুটা চোখের জল হতে দেখি কারণ এটি নির্বাচন বাক্সের প্রস্থের চেয়ে কম হয়ে যেতে পারে। সুতরাং, আমি আমার বিভাজক তৈরি করতে সিএসএস ব্যবহার করতে পছন্দ করি .. একটি সাধারণ পটভূমি রঙিন।
<select>
<option style="background-color: #cccccc;" disabled selected>Select An Option</option>
<option>First Option</option>
<option>Second</option>
<option style="font-size: 1pt; background-color: #000000;" disabled> </option>
<option>Third</option>
<option>Fourth</option>
<option style="font-size: 1pt; background-color: #000000;" disabled> </option>
<option>Fifth</option>
<option>Sixth</option>
</select>আপনি যদি অপ্টগ্রুপ উপাদানটি ব্যবহার করতে না চান, তবে পরিবর্তে কোনও বিকল্প উপাদানে ড্যাশগুলি রাখুন এবং এটিকে অক্ষম বৈশিষ্ট্যটি দিন। এটি দৃশ্যমান হবে, তবে ধুসর।
<option disabled>----------</option>নিয়মিত হাইফনের পরিবর্তে আমি এটিকে প্রসারিত অক্ষর সেট থেকে অনুভূমিক বারের প্রতীক ব্যবহার করে প্রতিস্থাপন করেছি, যদি ব্যবহারকারী অন্য কোনও দেশে সেই চরিত্রটি প্রতিস্থাপন করে তবে আমার পক্ষে ভাল কাজ করে তবে এটি খুব সুন্দর লাগবে না। বিভিন্ন চ্যাটারের একটি ব্যাপ্তি রয়েছে যা আপনি কিছু দুর্দান্ত প্রভাবের জন্য ব্যবহার করতে পারেন এবং এতে কোনও সিএসএস জড়িত নেই।
<option value='-' disabled>――――</option>সিএসএসে একটি শ্রেণী নির্ধারণ করুন:
option.separator {
margin-top:8px;
border-top:1px solid #666;
padding:0;
}এইচটিএমএল লিখুন:
<select ...>
<option disabled class="separator"></option>
</select>আমি @ লরেন্স গনসালভেসের একটি উত্তরে মন্তব্য করছি কারণ এটিই একমাত্র শব্দ যা শব্দার্থকভাবে কাজ করে এবং হ্যাকের মতো লাগে না।
এটি আপনার স্টাইলশিটে যুক্ত করার চেষ্টা করুন:
optgroup + optgroup { border-top: 1px solid black } একগুচ্ছ ড্যাশগুলির চেয়ে অনেক কম চিটচিটে দেখাচ্ছে।
optgroup { padding-bottom: 8px; } optgroup:not(:first-child) { padding-top: 8px; border-top: solid 1px #666; }
অন্য উপায়টি হ'ল বিকল্পটিতে CSS 1x1 ব্যাকগ্রাউন্ড চিত্র ব্যবহার করা যা কেবল ফায়ারফক্সের সাথে কাজ করে এবং "----" ফ্যালব্যাক পেয়ে থাকে
<option value="" disabled="disabled" class="SelectSeparator">----</option>
.SelectSeparator
{
background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==);
color:black;
background-repeat:repeat-x;
background-position:50% 50%;
background-attachment:scroll;
}বা জাভাস্ক্রিপ্ট (jquery) ব্যবহার করতে:
-hide the select element and
-show a div which can be completely styled and
-reflect the div state onto the select for the form submithttp://tutorialzine.com/2010/11/better-select-jquery-css3/
আরও দেখুন কীভাবে আমি এইচটিএমএল নির্বাচন নিয়ন্ত্রণে একটি অনুভূমিক রেখা যুক্ত করব?
যদি এটি কেবল ওয়েবকিট হয় তবে আপনি <hr>আসল বিভাজক তৈরি করতে ব্যবহার করতে পারেন ।
আপনি এম ড্যাশ "-" ব্যবহার করতে পারেন। প্রতিটি চরিত্রের মধ্যে এর কোনও দৃশ্যমান স্থান নেই।
( কিছু ফন্টে!)
এইচটিএমএলে:
<বিকল্প মান = "disabled" অক্ষম> ————————————— </ translation>
বা এক্সএইচটিএমএল:
<বিকল্প মান = "disabled" অক্ষম = "অক্ষম"> ————————————— </option>
আমি শর্তাধীন বিকল্প রঙ এবং ব্যাকগ্রাউন্ডে নির্বাচিত হয়েছি। একটি বাছাই অর্ডার এবং vue.js দিয়ে সেট করে, আমি এরকম কিছু করেছি:
<style>
.altgroup_1 {background:gray; color:white;}
.altgroup_2{background:white; color:black;}
</style>
<option :class = {
'altgroup_1': (country.sort_order > 25),
'altgroup_2': (country.sort_order > 50 }"
value="{{ country.iso_short }}">
{{ country.short_name }}
</option