Ändern css Schriftart-Familie für separate Optionen in wählen Tag

Ich weiß nicht, ob dies möglich ist, und wenn nicht, wenn jemand optionale Ideen werfen kann, aber ich versuche, eine Dropdown-Liste von verschiedenen Schriftarten (insbesondere Schriftarten aus dem Google-Schriftverzeichnis) in einem Select-Tag. In der Drop-Down, versuche ich durch Styling jede Option mit der Schriftart eine Vorschau zu zeigen, esÄndern css Schriftart-Familie für separate Optionen in wählen Tag

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

obwohl dies scheint nicht zu funktionieren, darstellt. Irgendwelche Hinweise, warum oder wie man es repariert?

Quelle

2011-01-12 Dandy

falls jemand in ein ähnliches Problem ausgeführt wird: IE9 (mindestens) scheint 'font-size' Einstellungen zu ignorieren, wenn sie an die Option gebunden sind - aber wird nehmen Sie 'font-size', wenn Sie an' select' selbst gebunden sind. –

Sie können die Schriftart des <option>-Tag nicht gesetzt, aber man könnte eine Liste mit spezifischen Stile erstellen (wie man erwarten würde)

Hier ist alles, was ich versucht habe:

$("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>

Quelle

2011-01-12 19:16:50 hunter

könnten Sie dies in Chrome Browser arbeiten lassen? – matthewb

Die CSS arbeitet für mich in Chrome 58 (auf Linux), nett! –

Vielleicht können Sie Javascript verwenden? Kannst du das versuchen?

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

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

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

Quelle

2011-01-12 19:16:56 Eray

funktioniert hier nicht: http://jsfiddle.net/95TVh/1/ – hunter

Welchen Browser benutzen Sie? Ich benutze Firefox und es funktioniert. – Eray

FF erkennt Schriften auf Optionen, aber die meisten Browser nicht – hunter

Ich verwendete eine Hackish-Stil-Methode, um es zu tun.

Da ich das select-Tag stylen musste und einige weitere Dinge anpassen wollte, habe ich das Stylish Select-Plugin für jQuery verwendet und das font-family css-Attribut an das übergeordnete Element angehängt (was ein List-Tag war).

Das funktionierte mit wenig Code und war Cross-Browser-kompatibel.

Quelle

2011-01-12 20:45:23 Dandy

sollten Sie wickeln jedes option Tag in einem optgroup-Tag und dann Stil, wie:

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

Quelle

2012-08-23 14:31:45

das tut Arbeit :( – ppumkin

Funktioniert für mich. Super !! –

Dies funktioniert, aber gibt es eine Möglichkeit, die Lücke zwischen den Optionen zu entfernen, und, was noch wichtiger ist, diesen Einzug auf der vorletzten Option (scheint immer vorletzte zu sein)? – Goose

Sie können einfach wie diese verwenden

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

Quelle

2016-07-30 11:21:31

Geben Sie den Namen der Schriftart zum Optionswert. Dann können Sie alle mit jquery setzen. Hier

ist ein Beispiel:

Sie neue Schriftart leicht wie folgt hinzufügen:

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

Quelle

2016-11-01 08:31:07 Nezih

Alle oben Ball hielt Display Sache erwähnt Optionen korrekt auf OSX Safari. Ich schaffte es, Dinge zu bekommen richtig durch Bootstrap mit:

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

Quelle

2018-03-04 08:56:23

Ändern css Schriftart-Familie für separate Optionen in wählen Tag

Antwort

Verwandte Themen