html सेलेक्ट ऑप्शन सेपरेटर

208

चुनिंदा टैग में आप एक विभाजक कैसे बनाते हैं?

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

html

— फिलिप सन्ना
स्रोत

मैं आमतौर पर लेबल के रूप में व्हाट्सएप के साथ एक अक्षम विकल्प जोड़ता हूं।

— अभि बेकर्ट

331

अक्षम विकल्प दृष्टिकोण सबसे अच्छा लग रहा है और सबसे अच्छा समर्थित है। मैंने ऑप्टग्रुप का उपयोग करने का एक उदाहरण भी शामिल किया है।

Optgroup (इस तरह थोड़े बेकार है):

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

— एलेक्स के
स्रोत

21

यूनिकोड ने मेरे लिए jsfiddle में बहुत अच्छा काम किया, लेकिन जब मैंने इसे अपने कोड में कॉपी / पेस्ट करने की कोशिश की, तो यह ठीक से अनुवाद नहीं हुआ। तो उस समस्या वाले लोगों के लिए, क्षैतिज यूनिकोड बॉक्स ड्राइंग कैरेक्टर के लिए HTML एन्कोडिंग & # 9472 है; fileformat.info/info/unicode/char/2500/index.htm और & # 9473 पर भारी विकल्प भी है; fileformat.info/info/unicode/char/2501/index.htm

— जेएफजी

1

मोबाइल फ़ायरफ़ॉक्स (और संभवतः अन्य मोबाइल ब्राउज़र पर) disabledविकल्प को दाईं ओर एक अक्षम रेडियो बटन के साथ दिखाया गया है ...

— GoTo

लेकिन ऑप्टोग्रुप्स को पीसी बनाम मोबाइल पर अलग-अलग तरीके से प्रस्तुत किया जाता है, इसलिए अक्षम विकल्प अभी भी सबसे अच्छा समाधान है।

— गोत्तो

1

Html फ़ाइल की एन्कोडिंग "characters" वर्णों के लिए एक पंक्ति के रूप में दिखाने के लिए भी महत्वपूर्ण है, बजाय गिबरिश के। BOM के साथ UFT8 एक अच्छा विकल्प हो सकता है।

— एंड्रियास जानसन

1

@ db0 उपस्थिति असंगत है। Grab.by/EzEi vs Grab.by/EzEk (jsfiddle लिंक देखें)।

— एलेक्स के

76

प्रयत्न:

<optgroup label="----------"></optgroup>

— टीना ओरोजी
स्रोत

40

ऑप्टग्रुप्स पर एक लेबल लगाने के बजाय, इसे अपनी स्टाइलशीट में जोड़ने का प्रयास करें: ऑप्टग्रुप + ऑप्टग्रुप {बॉर्डर-टॉप: 1 पीएक्स सॉलिड ब्लैक} डैसेस के एक गुच्छा की तुलना में बहुत कम लजीज।

— लॉरेंस गोंसाल्वेस

2

ऑप्टग्रुप लेबल को समूह का वर्णन करना चाहिए। यदि एक ब्राउज़र HTML 4.01 कल्पना में स्क्रीनशॉट के अनुसार लागू किया जाता है, तो उपयोगकर्ता डैश की पंक्तियों के साथ सामना किया जाएगा और यह पता लगाने के लिए प्रत्येक को जांचना होगा कि इसके पीछे क्या था।

— क्वेंटिन

2

@ लॉरेंस: IE7 ऑप्टग्रुप या विकल्प तत्वों पर सीएसएस शैलियों का समर्थन नहीं करता है। कम से कम सीमाएँ नहीं

— grom

1

<Optgroup style = "border-top: 1px dotted #ccc; मार्जिन: 5px 0;"> </ Optgroup> - कम से कम फ़ायरफ़ॉक्स में अच्छा लग रहा है!

— बेन सिंक्लेयर

1

इस तरह से एक खाली ऑप्टग्रुप कानूनी html नहीं है। यदि आप इसका उपयोग करते हैं तो आपको सत्यापन त्रुटियां मिलेंगी। मुझे james.garriss का जवाब पसंद है।

— एरियल

22

यह एक पुराना धागा है, लेकिन चूंकि किसी ने भी इसी तरह की प्रतिक्रिया पोस्ट नहीं की है, इसलिए मैं इसे जोड़ दूंगा क्योंकि यह मेरे अलग होने का पसंदीदा तरीका है।

मैं डैश का उपयोग करता हूं और इस तरह से कुछ हद तक आंखों की रोशनी का उपयोग करता हूं क्योंकि यह चयन बॉक्स की चौड़ाई से कम हो सकता है। इसलिए, मैं अपने विभाजकों को बनाने के लिए CSS का उपयोग करना पसंद करता हूं .. एक साधारण पृष्ठभूमि का रंग।

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

स्निपेट का विस्तार करें

— निपुण ब्लेक
स्रोत

महान ! मैंने मिनट-ऊंचाई का उपयोग किया: 1 पीएक्स; अधिकतम ऊँचाई: 1px; गद्दी: 0; फ़ॉन्ट-आकार के बजाय: 1pt; 1px लाइन के लिए

— kofifus

15

यदि आप ऑप्टग्रुप तत्व का उपयोग नहीं करना चाहते हैं, तो इसके बजाय विकल्प तत्व में डैश डालें और इसे अक्षम विशेषता दें। यह दिखाई देगा, लेकिन बाहर निकल गया।

<option disabled>----------</option>

— james.garriss
स्रोत

हाय जेम्स, मुझे यह समाधान भी पसंद है, लेकिन स्क्रीन्रेडर्स "अक्षम विकल्प डैश डैश डैश ..." को पढ़ेंगे जो अक्षम उपयोगकर्ताओं के लिए बहुत भ्रमित हो सकता है ... क्या आपको पता है कि हम इससे कैसे बच सकते हैं? धन्यवाद!

— जूलियो

1

क्या दृश्य तत्वों में एक वर्ग जोड़ना संभव है जिसे आप नहीं बोलना चाहते हैं, फिर एक ARIA कमांड जोड़ें जो वर्ग को छुपाता / निष्क्रिय करता है? शायद यहाँ इस्तेमाल की जाने वाली तकनीकों में से कुछ की तरह? asurkov.blogspot.com/2012/02/…

— james.garriss

दरअसल, @ जूलियो, आपको इसे एक नए प्रश्न के रूप में पोस्ट करना चाहिए। मैं जानने के लिए उत्सुक हूं, लेकिन मैंने पहले कभी स्क्रीन्रेडर्स के लिए प्रोग्राम नहीं किया है।

— james.garriss

9

नियमित हाइफ़न के बजाय मैंने इसे विस्तारित चरित्र सेट से एक क्षैतिज बार प्रतीक का उपयोग करके बदल दिया, यह बहुत अच्छा नहीं लगेगा यदि उपयोगकर्ता किसी अन्य देश में है जो उस चरित्र को बदल देता है लेकिन मेरे लिए ठीक काम करता है। वहाँ विभिन्न अध्यायों की एक श्रृंखला है जो आप कुछ महान प्रभावों के लिए उपयोग कर सकते हैं और इसमें कोई सीएसएस शामिल नहीं है।

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

— user511941
स्रोत

8

CSS में एक क्लास को परिभाषित करें:

option.separator {
    margin-top:8px;
    border-top:1px solid #666;
    padding:0;
}

HTML में लिखें:

<select ...>
    <option disabled class="separator"></option>
</select>

— क्लाउस हेने
स्रोत

2

उत्तर को jsfiddle उदाहरण के साथ बेहतर बनाया जा सकता है। ऐसा लगता है कि साइड इफेक्ट्स या हैक्स पर भरोसा न करते हुए सबसे ज्यादा इन-बिल्ट सॉल्यूशन है, लेकिन अन्य उत्तरों के विजुअल की तुलना करना अच्छा होगा।

— छापे 3333

कई ब्राउज़रों में काम नहीं करता है। (हमेशा की तरह, आदानों बट में एक दर्द जा रहा है)

— चालीस

5

मैं @ लॉरेंस गोन्साल्व्स की टिप्पणी को एक उत्तर में बना रहा हूं क्योंकि यह केवल एक है जो शब्दार्थ से काम करता है और हैक की तरह नहीं दिखता है।

इसे अपनी स्टाइलशीट में जोड़ने का प्रयास करें:

optgroup + optgroup { border-top: 1px solid black }

बहुत कम चीज डैश के एक गुच्छा की तुलना में दिख रही है।

— noumenon
स्रोत

2

यह वास्तव में इसे करने का सही तरीका है (महत्वपूर्ण रूप से, यह अर्थहीन सामग्री नहीं जोड़ता है)। मैं इसे इस तरह से स्टाइल करना पसंद करता हूं (विभाजक के चारों ओर कुछ अतिरिक्त ऊर्ध्वाधर स्थान जोड़ना):optgroup { padding-bottom: 8px; } optgroup:not(:first-child) { padding-top: 8px; border-top: solid 1px #666; }

— निकोलस ले थिएरी डी'नेक्विन

3

दूसरा तरीका यह है कि आप विकल्प पर 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;
}

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/

यह भी देखें कि मैं html चयन नियंत्रण में एक क्षैतिज रेखा कैसे जोड़ूं?

— ebricca
स्रोत

3

यदि यह केवल WebKit है, तो आप <hr>एक वास्तविक विभाजक बनाने के लिए उपयोग कर सकते हैं ।

http://code.google.com/p/chromium/issues/detail?id=99534

— जॉन
स्रोत

1

आप उन्हें "-" डैश का उपयोग कर सकते हैं। प्रत्येक वर्ण के बीच इसका कोई दृश्य स्थान नहीं है।
( कुछ फोंट में!)

HTML में:

<विकल्प मूल्य = "———————————" "अक्षम> - ——————————— </ विकल्प>

या XHTML में:

<विकल्प मूल्य = "———————————" "अक्षम =" अक्षम "> ————————————— </ विकल्प>

— टोबी
स्रोत

1

वर्णों के बीच अंतर फ़ॉन्ट और रेंडरिंग इंजन द्वारा निर्धारित किया जाता है। उदाहरण के लिए, मैं क्रोम (विंडोज) पर आपके इम डैश के बीच रिक्त स्थान देखता हूं, लेकिन सफारी (मैक) पर नहीं।

— हैंक

1

यह एक हमेशा सबसे अच्छा है।

<option>First</option>
<option disabled>_________</option>
<option>Second</option>
<option>Third</option>

— टेजश्री
स्रोत

1

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

आप यह भी कर सकते हैं। यह आसान है और विभक्त चयन ड्रॉप डाउन सूची बनाते हैं।

— डीएसके
स्रोत

0

मैं सशर्त रूप से वैकल्पिक रंग और पृष्ठभूमि के लिए चुना गया। सॉर्ट क्रम सेट करना और 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

— STWilson
स्रोत