पाठ-संरेखित करें: <select> या <option> पर सही

Question

क्या किसी को पता है कि क्या WebKit में <select>या विशेष रूप से अधिक <option>तत्व के दाईं ओर पाठ संरेखित करना संभव है । यह IE सहित एक क्रॉस-ब्राउज़र समाधान होने की आवश्यकता नहीं है, लेकिन यदि संभव हो तो शुद्ध सीएसएस होना चाहिए।

मैंने दोनों की कोशिश की है:

select { text-align: right }और option { text-align: right }, लेकिन न तो WebKit (क्रोम, सफारी या मोबाइल सफारी) में काम किया है।

कोई मदद कृतज्ञता प्राप्त!

Comments

कहीं न कहीं एक बहुत गूंगा कारण है कि option {text-align: right;}काम क्यों नहीं करता है।

— बॉब स्टीन

Answer 1

आप "dir" विशेषता का उपयोग करने की कोशिश कर सकते हैं, लेकिन मुझे यकीन नहीं है कि वांछित प्रभाव पैदा करेगा?

<select dir="rtl">
    <option>Foo</option>    
    <option>bar</option>
    <option>to the right</option>
</select>

यहाँ डेमो: http://jsfiddle.net/fparent/YSJU7/

Comments

दरअसल, यह एकदम सही है। मैं appearance: none;वैसे भी विशेषता का उपयोग कर रहा था , इसलिए ड्रॉपडाउन की स्थिति कोई मायने नहीं रखती है। धन्यवाद!

— BenM

यह सभी मामलों में काम नहीं करता है: <विकल्प> 23 "x 42" </ विकल्प> पैदावार "x 42" 23। rtl यह भी बदलता है कि इसे स्क्रीन रीडर में कैसे पढ़ा जाता है।

— जेसन टी फेदरिंगम

क्या यह सिर्फ एक गंदे हैक की तरह नहीं दिखता है, इसे बिना यह सोचे कि यह कुछ विशेष मामलों में कैसे संसाधित किया जाएगा?

— सर्गेई बशारोव

IMHO यह दो कारणों से खराब है। 1. यह शब्दार्थ से गलत है। 2. Chrome 30 में, dir="rtl"तीर को बाईं ओर ड्रॉप-डाउन का संकेत देता है।

— फेकली

यह एक TERRIBLE विचार है। RTL उन भाषाओं के लिए है जो राइट-टू-लेफ्ट ऑर्डर में वर्णों को आकर्षित करती हैं, और यदि आप उस सामग्री को LTR भाषा में लिखा जाता है, तो आप इस तरह के विकल्प में सामग्री डालेंगे। उदाहरण के लिए "10 अगस्त 2017" की तारीख "अगस्त 2017 10" के रूप में आ जाएगी। आपके पास अपने पाठ पर क्या करता है, इस पर आपका कोई नियंत्रण नहीं है। इसका उपयोग न करें।

— devios1

Answer 2

निम्नलिखित सीएसएस तीर और विकल्प दोनों को दाएं-संरेखित करेगा:

select { text-align-last: right; }
option { direction: rtl; }

<!-- example usage -->
Choose one: <select>
  <option>The first option</option>
  <option>A second, fairly long option</option>
  <option>Last</option>
</select>

Comments

धन्यवाद @Laiacy - यह शानदार है! मुझे उम्मीद है कि आपको कई और वोट मिलेंगे।

— elastastor

साभार @ pshep123 मैं वास्तव में आपकी टिप्पणी की सराहना करता हूं :)

— लाइसी

जब मैं ड्रॉपडाउन (कम से कम विंडोज गूगल क्रोम पर) क्लिक करता हूं तो यह विकल्प मानों के लिए काम नहीं करता है। ड्रॉपडाउन टॉगल होने से पहले ही यह काम करता है।

— रयान

@ रेयान, मैंने अपना उत्तर संपादित कर दिया है। अब ड्रॉपडाउन में चयन और विकल्प मानों पर लागू होता है। मुझे पता है कि अगर यह आपके लिए काम करता है

— Laiacy

मेरे लिए यह उत्तर है। मैं दाईं ओर छोटे तीर रखने के लिए चाहता था, लेकिन विकल्प सही गठबंधन किया जाना चाहिए => इस जवाब है कि प्राप्त है कि

— Unchained

Answer 3

मेरे लिए सबसे अच्छा समाधान बनाना था

select {
    direction: rtl;
}

और फिर

option {
    direction: ltr;
}

फिर। इसलिए स्क्रीन रीडर में पाठ कैसे पढ़ा जाता है या कोई स्वरूपण-समस्या नहीं है, इसमें कोई बदलाव नहीं है।

Comments

बस यह पता चला कि IE6-8 (IE8 + के बारे में नहीं जानते) उस सही को प्रस्तुत न करें ...: - /

— मार्टिन शिलिगर

और फ़ायरफ़ॉक्स में भी यह सही काम नहीं करता है। केवल वेबकिट में एक अच्छा विचार लगता है ...

— मार्टिन शिलिगर

यदि आपके विकल्प में html () है, जो लाइन की शुरुआत में) को स्थानांतरित करेगा (पहले वर्ण से बाईं ओर है)। > _ <

— rm-

इसके अलावा, यदि आप "()" के रूप में (और )?

— मार्टिन शिलिगर 5

हालांकि, फ़ायरफ़ॉक्स पर, वर्तमान (चयनित) मान "AM" के साथ बाईं ओर ("AM 9:30") दिखाता है।

— मार्क श्नाइडर

Answer 4

मुझे लगता है कि तुम क्या चाहते हो:

select {
  direction: rtl;
}

यहाँ fiddled: http://jsfiddle.net/neilheinrich/XS3yQ/

Comments

शांत, लेकिन तीर फिर बाएं जाता है। क्या होगा यदि हम चाहते हैं कि पाठ और चयन तीर दोनों को दाईं ओर संरेखित किया जाए?

— बैप्टिस्ट

Answer 5

मैं उसी मुद्दे का सामना कर रहा था जिसमें मुझे चयनित बॉक्स के दाईं ओर चयनित प्लेसहोल्डर मान को संरेखित करने की आवश्यकता है और दाएं तरफ विकल्पों को संरेखित करने की भी आवश्यकता है, लेकिन जब मैंने दिशा का उपयोग किया हो: rtl; चयन करने के लिए कुछ सही पैडिंग का चयन करें और लागू करें फिर सभी विकल्प भी पैडिंग द्वारा दाईं ओर शिफ्ट हो रहे हैं क्योंकि मैं केवल चयनित प्लेसहोल्डर को पैडिंग लागू करना चाहता हूं।

मैंने निम्नलिखित शैली द्वारा इस मुद्दे को तय किया है:

select:first-child{
  text-indent: 24%;
  direction: rtl;
  padding-right: 7px;
}

select option{
  direction: rtl;
}

आप अपनी आवश्यकता के अनुसार पाठ-इंडेंट बदल सकते हैं। आशा है इससे आपकी मदद होगी।