सूची के फ़ॉन्ट आकार को कैसे बदलें (प्रारंभिक दृश्य नहीं)

Question

मैंने ड्रॉपडाउन सूची के प्रारंभिक दृश्य के लिए एक कस्टम फ़ॉन्ट और पृष्ठभूमि सेट की है (एक विकल्प का चयन करें)। font-size 20 पिक्सेल है और कस्टम फ़ॉन्ट के साथ अच्छा लग रहा है। हालांकि जब मैं सूची पर क्लिक करता हूं, तो विकल्प font-size को छोड़कर, विकल्प को कस्टम फ़ॉन्ट का उपयोग नहीं करते हैं और सामान्य दिखते हैं। यह केवल क्रोम के साथ मामला प्रतीत होता है (मैंने सफारी और फ़ायरफ़ॉक्स का भी परीक्षण किया है)।

@font-face { 
 
    font-family: 'Averia Libre'; 
 
    font-style: normal; 
 
    font-weight: 400; 
 
    src: local('Averia Libre Regular'), local('AveriaLibre-Regular'), 
 
    url('http://themes.googleusercontent.com/static/fonts/averialibre/v1/rYVgHZZQICWnhjguGsBspHhCUOGz7vYGh680lGh-uXM.woff') format('woff'); 
 
} 
 
select { 
 
    font-size: 20px; 
 
    font-family: 'Averia Libre', cursive; 
 
    background: url(http://www.greenriverworks.com/elements/borders/green_button_background_over.jpg) repeat-x; 
 
    width: 400px; 
 
    font-family: 'Averia Libre'; 
 
}

<link href='http://fonts.googleapis.com/css?family=Averia+Libre' rel='stylesheet' type='text/css'> 
 
<select> 
 
    <option value="">I'm a custom font.</option> 
 
    <option value="">Hey me too!</option> 
 
    <option value="">Averia Libre</option> 
 
</select>

मैं विकल्पों को खुद के लिए एक अलग वर्ग बनाने की कोशिश की, लेकिन वह कोई असर नहीं लगता था।

आगे उदाहरण के लिए, यहां एक JSFiddle है।

क्रोम:

फ़ायरफ़ॉक्स:

Answer 1

मैं क्रोम पर सफलतापूर्वक इस किया है। Google फ़ॉन्ट्स द्वारा कस्टम फ़ॉन्ट के साथ यहां एक उदाहरण दिया गया है।

फिडल:http://jsfiddle.net/simple/wpHKe/

एचटीएमएल कोड, तुम्हारा के रूप में:

<select> 
<option value="">I'm a custom font.</option> 
<option value="">Hey me too!</option> 
<option value="">Averia Libre</option> 
</select>​ 

बेशक , सीएसएस:

select { 
    font-size: 20px; 
    font-family: 'Averia Libre', cursive; 
}​ 

और फ़ॉन्ट चेहरा आता है किGoogle से:

आप इसे बाहरी स्टाइल शीट के रूप में लिंक कर सकते हैं, लेकिन यह इसके अंदर कोड है।

@font-face { 
    font-family: 'Averia Libre'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Averia Libre Regular'), local('AveriaLibre-Regular'), 
    url('http://themes.googleusercontent.com/static/fonts/averialibre/v1/rYVgHZZQICWnhjguGsBspHhCUOGz7vYGh680lGh-uXM.woff') format('woff'); 
} 

संपादित करें:

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

HTML:

<select class="yourSelectClass"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
</select> 

सीएसएस:

+०१२३५१६४१०६

.yourSelectClass 
{ 
/* Your Dropdown CSS here */ 
} 

Answer 2

मैं पीटर के साथ लेकिन के उपयोग के द्वारा सहमति हूँ: सीएसएस पर

select { 
    font-size: 20px; 
    font-family: 'Averia Libre', cursive; 
} 

तो वह कुल चयन

सीएसएस

के बजाय वर्ग का उपयोग करना चाहिए लटकती फॉन्ट के सभी बदल जाएगा

.selectClass { 
    font-size: 25px; 
    font-family: 'Impact', cursive; 
}​ 

और एचटीएमएल

<link href='http://fonts.googleapis.com/css?family=Averia+Libre' rel='stylesheet' type='text/css'> 

<select class="selectClass"> 
<option value="">I'm a custom font.</option> 
<option value="">Hey me too!</option> 
<option value="">Averia Libre</option> 
</select>​ 

या आप सीधे http://jsfiddle.net/sNkDW/

Answer 3

यह ड्रॉपडाउन सूची की तरह लग रहा है मैक ओएस एक्स

की "देशी यूआई" द्वारा प्रतिपादन, तो फ़ॉन्ट स्थापित करने जा रहा है और/या आकार पर बेला देख सकते हैं वास्तव में कुछ भी नहीं बदलता है, इसके बारे में आप कुछ भी नहीं कर सकते हैं।

(<select> को custom JavaScript version के साथ बदलने के अलावा)।

Answer 4

क्रोम वर्ग का चयन करने के लिए background: white; जोड़ने की कोशिश में

। पृष्ठभूमि को सफेद क्रोम पर सेट करके भी मेरे बाकी विनिर्देशों जैसे ऊंचाई और फ़ॉन्ट का पालन किया।

.yourselectclass select { 
    background: white; 
    font-size: 16px; 
    margin-left: 5px; 
    font-family: 'Cabin', sans-serif; 
    height: 30px; 
    width: 88px; 
} 

Answer 5

विकल्प टैग के अंदर पाठ का सीएसएस स्टाइल फ़ायरफ़ॉक्स में बदला नहीं जा सकता है।

फ़ायरफ़ॉक्स में: ड्रॉप डाउन कॉम्बो बॉक्स में केवल "चयनित" तत्व आपके द्वारा लागू किसी भी सीएसएस स्टाइल का सम्मान करता है। शैली विकल्प टैग पर कैस्केड नहीं है। प्रत्येक विकल्प टैग में सीएसएस शैली जोड़ना कोई प्रभाव नहीं पड़ता है।

Chrome में: क्रोम स्टाइल आप का चयन करें और विकल्प टैग को जोड़ने के सीएसएस सम्मान करता है। शैली विकल्प टैग करने के लिए चयन टैग से नीचे झरना नहीं है, लेकिन आप प्रत्येक विकल्प के टैग के लिए शैली लागू कर सकते हैं।

मैं पढ़ा है कि "मानक" stylable होने के लिए चयन करें और विकल्प टैग आवश्यक नहीं है।

Answer 6

मैं एक ही मुद्दे का सामना करना पड़ा है। असल में यह कोई मुद्दा नहीं है। चयन मेनू आकार सूची आइटम पाठ की लंबाई के आधार पर प्रकट होता है। अपने विकल्प लेबल

पूर्व: यदि आपके पास विकल्प टैग में लंबा टेक्स्ट है तो चयन मेनू फ़ॉन्ट आकार छोटा होगा।