html - tutorial - এইচটিএমএল নির্বাচন অপশন বিভাজক




html কি (9)

আপনি এম ড্যাশ ব্যবহার করতে পারেন "-"। এটা প্রতিটি চরিত্র মধ্যে কোন দৃশ্যমান স্পেস আছে।
( কিছু ফন্ট!)

এইচটিএমএল:

<option value="—————————————" disabled>—————————————</option>

বা এক্সএইচটিএমে:

<option value="—————————————" disabled="disabled">—————————————</option>

আপনি একটি নির্বাচন ট্যাগ একটি বিভাজক কিভাবে করবেন?

New Window
New Tab
-----------
Save Page
------------
Exit

আপনি যদি অপটগ্রুপ উপাদানটি ব্যবহার করতে না চান তবে পরিবর্তে বিকল্প উপাদানগুলিতে ড্যাশগুলি রাখুন এবং এটি অক্ষম বৈশিষ্ট্যটি দিন। এটা দৃশ্যমান হবে, কিন্তু ধূসর আউট।

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

আরেকটি উপায় হল সিএসএস 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;
}

http://jsfiddle.net/yNecQ/6/

অথবা জাভাস্ক্রিপ্ট (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 submit

http://tutorialzine.com/2010/11/better-select-jquery-css3/

আমি কিভাবে একটি এইচটিএমএল নির্বাচন নিয়ন্ত্রণ একটি অনুভূমিক লাইন যোগ করবেন দেখতে ?


এটি একটি পুরানো থ্রেড, কিন্তু যেহেতু কেউই একইরকম প্রতিক্রিয়া পোস্ট করেনি, আমি এটি যোগ করব কারণ এটি আমার বিচ্ছেদের পছন্দের উপায়।

আমি ড্যাশ ব্যবহার করে দেখি এবং এটিকে কিছুক্ষেত্রে চোখের মতো দেখতে হবে কারণ এটি নির্বাচন বাক্সের প্রস্থের সংক্ষিপ্ত হতে পারে। সুতরাং, আমি আমার বিভাজক তৈরি করতে সিএসএস ব্যবহার করতে পছন্দ করি .. একটি সহজ পটভূমি রঙ।

<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>&nbsp;</option>
  <option>Third</option>
  <option>Fourth</option>
  <option style="font-size: 1pt; background-color: #000000;" disabled>&nbsp;</option>
  <option>Fifth</option>
  <option>Sixth</option>
</select>



নিয়মিত হাইফোন পরিবর্তে আমি বর্ধিত চরিত্র সেট থেকে একটি অনুভূমিক বার প্রতীক ব্যবহার করে এটি প্রতিস্থাপিত করেছি, যদি ব্যবহারকারী অন্য কোন দেশে থাকে তবে এটি সেই চরিত্রটিকে প্রতিস্থাপিত করে তবে আমার জন্য সূক্ষ্ম কাজ করে। কিছু দুর্দান্ত প্রভাবের জন্য আপনি বিভিন্ন অক্ষরের একটি পরিসীমা ব্যবহার করতে পারেন এবং এতে কোনও CSS অন্তর্ভুক্ত নেই।

<option value='-' disabled>――――</option>

নিষ্ক্রিয় বিকল্প পদ্ধতির সেরা চেহারা এবং ভাল সমর্থিত মনে হচ্ছে। আমি optgroup ব্যবহার করে একটি উদাহরণ অন্তর্ভুক্ত করেছি।

optgroup (এই ভাবে kinda sucks):

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

http://jsfiddle.net/JFDgH/2/


 <option  data-divider="true" disabled>______________</option>

আপনি এই এক করতে পারেন। এটা সহজ এবং বিভক্ত তালিকা ড্রপ ডাউন তালিকা করা।






html