चयन टैग

में अलग-अलग विकल्पों के लिए सीएसएस फ़ॉन्ट-परिवार बदलें, मुझे नहीं पता कि यह संभव है, और यदि नहीं, तो कोई वैकल्पिक विचारों को फेंक सकता है, लेकिन मैं विभिन्न फ़ॉन्ट्स के ड्रॉप डाउन को प्रदर्शित करने का प्रयास कर रहा हूं (विशेष रूप से, Google की फ़ॉन्ट निर्देशिका से फ़ॉन्ट) एक चुनिंदा टैग में। ड्रॉप डाउन में, मैं यह प्रतिनिधित्व करताचयन टैग

<option name="Tangerine" style="font-family:'Tangerine', verdana;">Tangerine</option>

यह काम करने, हालांकि प्रतीत नहीं होता फॉन्ट के साथ प्रत्येक विकल्प स्टाइल से एक पूर्वावलोकन दिखाने के लिए कोशिश कर रहा हूँ। कोई सुराग क्यों या इसे ठीक करने के लिए कैसे?

स्रोत

2011-01-12 Dandy

एक ऐसी ही समस्या में चल रहा है: IE9 (कम से कम) 'अनदेखी करने के लिए font-size' सेटिंग्स जब वे विकल्प के लिए बाध्य कर रहे हैं लगता है - लेकिन होगा 'select' के लिए बाध्य होने पर 'फ़ॉन्ट-आकार' लें। –

आप <option> टैग का फ़ॉन्ट सेट नहीं कर सकते, लेकिन आप (जैसा कि आप उम्मीद करेंगे)

यहाँ सब कुछ मैं कोशिश कर दिया गया है विशिष्ट शैली के साथ एक सूची बना सकते हैं:

$("select.js option:eq(0), ul li:eq(0)").css("fontFamily", "tangerine"); 
 
$("select.js option:eq(1), ul li:eq(1)").css("fontFamily", "tahoma"); 
 
$("select.js option:eq(2), ul li:eq(2)").css("fontFamily", "times new roman");

h1 { 
 
    font-size: 1.2em; 
 
    margin-top: 10px; 
 
    color: #777; 
 
} 
 
.tangerine { 
 
    font-family: tangerine; 
 
} 
 
.tahoma { 
 
    font-family: tahoma; 
 
} 
 
.timesnewroman { 
 
    font-family: times new roman; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
 
<h1>Set with jQuery</h2> 
 
<select id="js"> 
 
    <option>Tangerine</option> 
 
    <option>Tahoma</option> 
 
    <option>Times New Roman</option> 
 
</select> 
 
<div>&nbsp;</div> 
 
<h1>Set with CSS</h2> 
 
<select id="css"> 
 
    <option class="tangerine">Tangerine</option> 
 
    <option class="tahoma">Tahoma</option> 
 
    <option class="timesnewroman">Times New Roman</option> 
 
</select> 
 
<div>&nbsp;</div> 
 
<h1>List</h2> 
 
<ul> 
 
    <li>Tangerine</li> 
 
    <li>Tahoma</li> 
 
    <li>Times New Roman</li> 
 
</ul>

स्रोत

2011-01-12 19:16:50 hunter

क्या आप क्रोम ब्राउजर में यह काम कर सकते हैं? – matthewb

सीएसएस 58 क्रोम 58 (लिनक्स पर) में मेरे लिए काम कर रहा है, अच्छा! –

शायद आप जावास्क्रिप्ट का उपयोग कर सकते हैं? क्या आप इसे आजमा सकते हैं?

<script> 
myObj = document.getElementById("tahoma"); 
myObj.style.font = "Tahoma"; 
myObj.style.color = "red"; 

// Change anything else that you like! 
</script> 

<option id="tahoma .....>

स्रोत

2011-01-12 19:16:56 Eray

यहां काम नहीं कर रहा है: http://jsfiddle.net/95TVh/1/ – hunter

आप किस ब्राउज़र का उपयोग कर रहे हैं? मैं फ़ायरफ़ॉक्स का उपयोग कर रहा हूं और यह काम कर रहा है। – Eray

एफएफ विकल्पों पर फोंट को पहचानता है लेकिन अधिकांश ब्राउज़र – hunter

मैंने इसे करने के लिए एक हैकिश-शैली विधि का उपयोग किया।

क्योंकि मुझे चुनिंदा टैग स्टाइल करने की आवश्यकता है और कुछ और चीजों को कस्टमाइज़ करना चाहता था, मैंने jQuery के लिए स्टाइलिश सिलेक्ट प्लगइन का उपयोग किया और पैरेंट-परिवार सीएसएस विशेषता को पैरेंट एलिमेंट (जो एक सूची टैग था) से जोड़ा।

जो छोटे कोड के साथ काम करता था और क्रॉस-ब्राउज़र संगत था।

स्रोत

2011-01-12 20:45:23 Dandy

आपको लगता है कि के रूप में एक optgroup टैग और फिर शैली में प्रत्येक option टैग लपेट चाहिए:

<select> 
 

 
    <optgroup style="font-family:arial"> 
 
    <option>Arial</option> 
 
    </optgroup> 
 

 
    <optgroup style="font-family:verdana"> 
 
    <option>veranda</option> 
 
    </optgroup> 
 

 
    <optgroup style="font-family:other"> 
 
    <option>other</option> 
 
    </optgroup> 
 

 
</select>

स्रोत

2012-08-23 14:31:45

जो नहीं है काम :( – ppumkin

मेरे लिए काम करता है। बहुत बढ़िया !! –

यह काम करता है, लेकिन विकल्पों के बीच अंतर को दूर करने का कोई तरीका है, और सबसे महत्वपूर्ण बात यह है कि दूसरे विकल्प पर अंतिम इंडेंट (हमेशा के लिए दूसरा होना प्रतीत होता है)? – Goose

आप बस इस

<select id='lstFonts' class='form-control'> 
    <option style="font-family:Arial" value="Arial">Arial</option> 
    <option style="font-family:Verdana" value="Verdana">Arial</option> 
</select>

स्रोत

2016-07-30 11:21:31

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

यहाँ एक उदाहरण है:

आप इस तरह आसानी से नया फ़ॉन्ट जोड़ सकते हैं:

<option value="myFontName">My Font Name</option>

$("#selectfont").each(function(){ 
 
    $(this).children("option").each(function(){ 
 
    $(this).css("fontFamily",this.value); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
 
<select id="selectfont"> 
 
<option value="tangerine">Tangerine</option> 
 
<option value="tahoma">Tahoma</option> 
 
<option value="times new roman">Times New Roman</option> 
 
</select>

स्रोत

2016-11-01 08:31:07 Nezih

सभी विकल्प फ्लॉप प्रदर्शन बात OSX सफारी पर सही ऊपर उल्लेख किया है। मैं बूटस्ट्रैप का उपयोग करके स्थिति सही पाने में कामयाब रहे: मामला किसी में

<!DOCTYPE html> 
    <html lang="nl"> 
    <head> 
    <meta charset="utf-8" /> 
    <title>font test</title> 
    <meta name="generator" content="BBEdit 10.5" /> 
    <link rel="stylesheet" type="text/css" href="yourpaththere/css/bootstrap.min.css" async /> 
    </head> 
    <body> 
    <style> 
    @font-face {font-family: edwardian;src:local("edwardian"),url('yourpathhere/font/edwardian.TTF');font-weight: normal;} 
    .edwardian{font-family: edwardian; font-size: 30px;} 

    .arial{font-family: arial;} 
    .times{font-family: times;} 
    .verdana{font-family: verdana;} 
    .helvetica{font-family: helvetica;} 
    </style> 
    <div id="fontdropdown1" class="dropdown" style="width: 300px;"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Kies een lettertype 
    <span class="caret"></span></button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> 
    <li role="presentation"><a role="menuitem" class="arial">Arial</a></li> 
    <li role="presentation" class="divider"></li> 
    <li role="presentation"><a role="menuitem" class="times">Times</a></li> 
    <li role="presentation"><a role="menuitem" class="verdana">Verdana</a></li> 
    <li role="presentation"><a role="menuitem" class="helvetica">Helvetica</a></li> 
    <li role="presentation"><a role="menuitem" class="edwardian">Edwardian</a></li> 
    </ul> 
    </div> 
    <!-- test font dropdown --> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script type="text/javascript" src="yourpathhere/js/jquery-1.11.3.min.js"></script> 
    <script type="text/javascript" src="yourpathhere/js/bootstrap.js"></script> 
    </body> 
    </html>

स्रोत

2018-03-04 08:56:23

चयन टैग

उत्तर

संबंधित मुद्दे