Sujet Précédent Sujet Suivant

Changer police dans mode select html

Fermé
jguy Messages postés 2 Date d'inscription mardi 11 mars 2008 Statut Membre Dernière intervention 11 mars 2008 - 11 mars 2008 à 03:17
 Guigui - 8 févr. 2010 à 16:05
Bonjour,

J'essaie de modifier les polices de caractères ppour chacune des lignes dans l.option select en html

Voici un exemple


<SELECT name="m_os0">
<OPTION value="Arial">Arial
<OPTION value="Calibri">Calibri
<OPTION value="Courier New">Courier New
<OPTION value="Helvetica">Helvetica
<OPTION value="Times New">Times New
<OPTION value="Papyrus">Papyrus
<OPTION value="Trebuchet MS">Trébuchet MS
<OPTION value="Autres par courriel">Autres par courriel
</SELECT>

Pour chacune des loptions je voudrais que Arial soit écrit en caractère Arial, Calibri écrit en caractère Calibri etc...

J'ai essayé de différentes façon de modifier avec <font face="Arial"> Arial </font>
et positionné de différentes façon mais je ne trouve pas la façon.

si quelqu'un peut m'aider.

Merci en avance pour le coup de pouce
A voir également:

7 réponses

Réponse 1 / 7
faboons Messages postés 269 Date d'inscription mardi 12 février 2008 Statut Membre Dernière intervention 22 janvier 2024 50
11 mars 2008 à 04:32
Bonsoir, 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#arial {font-family: Arial;}
#calibri{ font-family: Calibri;}
#courrier {font-family: Courrier new;}
#helvetica {font-family: Helvetica;}
#times {font-family: Times New Roman;}
#papyrus {font-family: Papyrus;}
#trebuchet {font-family: Trebuchet MS;}
</style>
</head>

<body>
<select name="m_os0"> 
<option value="arial" id="arial">arial</option>
<option value="calibri" id="calibri">calibri</option>
<option value="courier new" id="courrier">courier new </option>
<option value="helvetica" id="helvetica">helvetica </option>
<option value="times new" id="times">times new </option>
<option value="papyrus" id="papyrus">papyrus </option>
<option value="trebuchet ms" id="trebuchet">tr&eacute;buchet ms </option> 
<option value="autres par courriel">autres par courriel </option>
</select>
</body>
</html>


Il faut que tu penses à fermer tes balises toutes les <options> étaient restées ouvertes.
Comme tu le vois la solution est xhtml / css.
Dans ce cas j'aiattribué un id unique à chaque option.
@ pluche.
P.S. : les lettres accentuées sont des caractères spéciaux et si tu les écris tels quels ils risquent de mal s'afficher.
Le é par exemple c'est é.
Voili voilà voilu!!!
1
jguy
11 mars 2008 à 05:37
Merci pour la réponse

Je suis débutant et j'ai essayé ce que tu m'a envoyé et ça ne fonctionne pas.

J'ai inséré style dans mon head et dans body j'ai placé select .... en fermant mes balises et en y incluant les id.

Qu'est-ce je n'ai pas de correct?

Merci
0
Réponse 2 / 7
Guigui
8 févr. 2010 à 16:05
Si dans ton formulaire tu veux ajouter un font de couleur pour la couleur spécifique tu peux copier une partie de mon code, cadeau ^^

Par exemple la couleur "vert" s'affichera avec un font vert



<select name="select9" onchange="document.form.police.value=this.value">
<option value="" selected="selected"></option>
<option value="#000000" style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);"> Noir </option>
<option value="#000080" style="background-color: rgb(0, 0, 128); color: rgb(255, 255, 255);"> Bleu marine </option>
<option value="#0000FF" style="background-color: rgb(0, 0, 255); color: rgb(255, 255, 255);"> Bleu vif </option>
<option value="#33CC00" style="background-color: rgb(51, 204, 0); color: rgb(255, 255, 255);"> Vert </option>
<option value="#00FF00" style="background-color: rgb(0, 255, 0); color: rgb(0, 0, 0);"> Vert vif </option>
<option value="#CC0000" style="background-color: rgb(204, 0, 0); color: rgb(255, 255, 255);"> Rouge </option>
<option value="#FF0000" style="background-color: rgb(255, 0, 0); color: rgb(0, 0, 0);"> Rouge vif </option>
<option value="#FF9900" style="background-color: rgb(255, 153, 0); color: rgb(0, 0, 0);"> Orange </option>
<option value="#FFFF00" style="background-color: rgb(255, 255, 0); color: rgb(0, 0, 0);"> Jaune </option>
<option value="#FFFFCF" style="background-color: rgb(255, 255, 207); color: rgb(0, 0, 0);"> Jaune clair </option>
<option value="#808080" style="background-color: rgb(128, 128, 128); color: rgb(255, 255, 255);"> Gris foncé </option>
<option value="#CCCCCC" style="background-color: rgb(204, 204, 204); color: rgb(255, 255, 255);"> Gris </option>
<option value="#FFFFFF" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"> Blanc </option>
</select>


Par contre si de ton côté tu pourrais m'aider pour afficher les polices a la manière de word... Sa m'aiderait grandement, j'en ai qui s'affiche et d'autres non...
1
Réponse 3 / 7
faboons Messages postés 269 Date d'inscription mardi 12 février 2008 Statut Membre Dernière intervention 22 janvier 2024 50
11 mars 2008 à 10:26
Salut,

je ne sais pas quoi te dire quand je copie/colle le code chez moi tout fonctionne très bien, les polices s'affichent, poste ton code pour voir stp, car si tu as fait tout ce que tu as dit il n'y a pas de raison que ça ne marche pas.
0
jguy
11 mars 2008 à 11:56
Voici le script au complet

il est fonctionnelmais je dois finir de compléter mes fonctions et c'est pourquoi que dans certaine validation il manque des informations mais rien pour affecter le roullement

<HTML>



<HEAD>
<TITLE>Traitement du formulaire</TITLE>


<style>
#arial {font-family: Arial;}
#calibri{ font-family: Calibri;}
#courrier {font-family: Courrier new;}
#helvetica {font-family: Helvetica;}
#times {font-family: Times New Roman;}
#papyrus {font-family: Papyrus;}
#trebuchet {font-family: Trebuchet MS;}
</style>




</HEAD>

<SCRIPT language="javascript">
<!--


var toucheDesac=255; //la touche 255 est inusitée ; touche enter = 13
var focusSuivant="nom"; // le premier champ de formulaire ou n'importe quel id
var gk=window.Event?1:0;

function toucheenter(e) {
var touche=gk?e.which:window.event.keyCode; //pour compatibilité FF IE
if (touche == toucheDesac){
document.getElementById(focusSuivant).focus();
return false;
}
}
document.onkeydown = toucheenter;



function valide_quantite() {

var m_vente_total=0.00;
var m_prix_unitaire=0;
var m_qty_vente=0;

if (document.form1.m_quantity.value < 100 )
{
alert ("Quantités minimum requise est de 100");
document.form1.m_quantity.value="";

}
else if (document.form1.m_quantity.value >= 100 && document.form1.m_quantity.value < 250)
{
m_prix_unitaire=1.25;
m_qty_vente=document.form1.m_quantity.value;
m_vente_total=(m_prix_unitaire*m_qty_vente);

if (confirm("Voulez-vous poursuivre votre commande \n Total de la vente $"+ m_vente_total+""))
{
document.form1.amount.value=1.25;
document.form1.quantity.value=document.form1.m_quantity.value;
document.form1.os0.value=document.form1.m_os0.value;
document.form1.os1.value=document.form1.m_os1.value;

alert ("Votre commande sera finalisée \n sur le site sécurisé \n Paypal");

document.form1.method='post';
document.form1.action='https://www.paypal.com/cgi-bin/webscr';
document.form1.submit();
document.form1.enctype='text/plain';
document.form1.method='post';
document.form1.action='mailto:jg.com?subject=commande';
document.form1.submit();
}
else
{
alert("Commande non complétée \n Merci!");
document.form1.m_quantity.value="";
}

}

else if (document.form1.m_quantity.value >= 250 && document.form1.m_quantity.value < 500)
{
document.form1.amount.value="1.15";
document.form1.quantity.value=document.form1.m_quantity.value;
document.form1.os0.value=document.form1.os0.m_value;
document.form1.os1.value=document.form1.os1.m_value;

alert ("Prix unitaire du crayon sera\n\n $1,15");
document.form1.submit();
}

else if (document.form1.m_quantity.value >= 500 && document.form1.m_quantity.value < 750)
{
document.form1.amount.value="1.05";
document.form1.quantity.value=document.form1.m_quantity.value;
document.form1.os0.value=document.form1.m_os0.value;
document.form1.os1.value=document.form1.m_os1.value;

alert ("Prix unitaire du crayon sera\n\n $1,05");
document.form1.submit();
}
else if (document.form1.m_quantity.value >= 750 && document.form1.m_quantity.value < 1000)
{
document.form1.amount.value="1.00";
document.form1.quantity.value=document.form1.m_quantity.value;
document.form1.os0.value=document.form1.m_os0.value;
document.form1.os1.value=document.form1.m_os1.value;

alert ("Prix unitaire du crayon sera\n\n $1,00");
document.form1.submit();
}
else if (document.form1.m_quantity.value >= 1000)
{
document.form1.amount.value="0.95";
document.form1.quantity.value=document.form1.m_quantity.value;
document.form1.os0.value=document.form1.m_os0.value;
document.form1.os1.value=document.form1.m_os1.value;

alert ("Prix unitaire du crayon sera\n\n $,95");
document.form1.submit();
}
}
//-->
</SCRIPT>

<BODY>
<FORM name="form1">


<TABLE border="2" bordercolordark="#966E46" bordercolorlight="#EDDCB3">
<CAPTION><H3><FONT color="#966e46">CHOIX DES OPTIONS </FONT> </H3></CAPTION>
<TR>
<TD ROWSPAN=5>

<TD><FONT color="#966e46">Quantités : </FONT>
<TD COLSPAN=2> <input type="text" name="m_quantity" id="m_quantity"
onFocus= "toucheDesac='13';focusSuivant='m_os0';" onBlur="toucheDesac='255';"
size="6"> </TR>
<TR>



<input type="hidden" name="item_name" value="Le Tendance">

<input type="hidden" name="quantity" value="" >
<input type="hidden" name="amount" value="">
<input type="hidden" name="on0" value="Police" >
<input type="hidden" name="os0" value="" >
<input type="hidden" name="on1" value="Couleur d'impression">
<input type="hidden" name="os1" value="">

<input type="hidden" name="no_shipping" value="0">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="CAD">
<input type="hidden" name="lc" value="CA">
<input type="hidden" name="bn" value="PP-BuyNowBF">



<TD> <FONT color="#966e46">Police de caractères : </FONT>
<TD align=left>

<select name="m_os0">
<option value="arial" id="arial">arial</option>
<option value="calibri" id="calibri">calibri</option>
<option value="courier new" id="courrier">courier new </option>
<option value="helvetica" id="helvetica">helvetica </option>
<option value="times new" id="times">times new </option>
<option value="papyrus" id="papyrus">papyrus </option>
<option value="trebuchet ms" id="trebuchet">trébuchet ms </option>
<option value="autres par courriel">autres par courriel </option>
</select>


</TR>
<TR>
<TD><FONT color="#966e46"> Couleur d'impression : </FONT>
<TD align=left>
<SELECT name="m_os1">
<OPTION value="Blanc">Blanc</option>
<OPTION value="Noir">Noir</option>
<OPTION value="Rouge">Rouge</option>
<OPTION value="Or">Or</option>
<OPTION value="Bleu">Bleu</option>
<OPTION value="Orange">Orange</option>
</SELECT>
</TR>
<TR><TR><TR>
<TD align=left>
<TD><FONT color="#966e46">3 lignes maximum</FONT><br>
<FONT color="#966e46"> 15 caractères par ligne </FONT><TD></br>
<TEXTAREA type="text" name="descriptions" rows=3 cols=15>
Entrez ici votre inscription ...
</TEXTAREA>
</TR>
<TR><TR>
<TD align="center" colspan=4>
<INPUT type="button" Value="Commander" name="valider" title="Faite votre paiement avec Paypal -c'est rapide , gratuit et sécuritaire" onClick="valide_quantite (this.form)"> <INPUT type="reset" value="Rétablir" name="raz">
</TD>
</TR>



</TABLE>
</form>


</BODY>



Merci de ton aide
0
Réponse 4 / 7
faboons Messages postés 269 Date d'inscription mardi 12 février 2008 Statut Membre Dernière intervention 22 janvier 2024 50
11 mars 2008 à 21:11
Re,

en fait sur firefox ça marche très bien mais sur IE ça ne marche pas.
Tu peux spécifier une couleur et un arrière-plan mais je t'avoue que là je sèche pour la police.

[url=https://imageshack.com/][img=http://img225.imageshack.us/img225/4873/sanstitre1on7.th.jpg][/url]

selon moi, IE n'est pas (encore?!) capable d'interpréter ce style de police dans la balise <option>.

@ pluche.
0
jguy
12 mars 2008 à 00:27
Merci de ton aide mais est-ce j'avais bien inscrit les informations de ton script?


Je vais essayer ton script mais pour les couleurs car j'ai aussi un choix de couleur.


Si tu as encore de bonne idées je suis à l'écoute


Encore une fois merci
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
magichit
12 mars 2008 à 00:51
à la place de
<style>

mettre :

<style type="text/css" rel="stylesheet" >

et ça devrait marcher. Par contre il risuqe d'avoir des problèmes si l'internaute n'a pas la police indiquée sur son ordinateur et qui risque de ne rien afficher du tout. Ajouter une police de remplacement peut être utile en général mais dans ton cas ça dénature un peu le contenu.
0
jguy
12 mars 2008 à 02:07
Merci

J'ai remplacé <STYLE> par <style type="text/css" rel="stylesheet" > et sur firefox cela fonctionne mais pas IE

C'est vraiment un problème avec IE.

Merci encore une fois . si tu as d'autres suggestions ne te gêne surtout pas.
0
Réponse 6 / 7
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
12 mars 2008 à 10:28
Bonjour,

Lorsque le nom de la police est sur plusieurs mots il faut mettre des " 


Font-Family: "Times New Roman", Serif;


Vas voir le site:

http://stylescss.free.fr/v2-properties/font-family.php

Et tu peux mettre aussi en deuxième position pour chacun une police "de secours" identique pour toutes, si l'internaute n'a pas la police 1 il aura au moins qq chose d'affiché.
0
jguy
13 mars 2008 à 00:28
Bonjour,

Merci de l'information et du lien mais malgré tout cela ne fonctionne pas sur internet explorer contrairement a firefox

Il y a surement une façon de faire mais je cherche encore


si tu as d'autres suggestions ne te gêne surtout pas

merci
0
Réponse 7 / 7
faboons Messages postés 269 Date d'inscription mardi 12 février 2008 Statut Membre Dernière intervention 22 janvier 2024 50
12 mars 2008 à 12:31
Salut,

pour les couleurs de police ne refais pas toute la manip : 

<style  type="text/css" rel="stylesheet" > 
#arial {font-family: Arial; background-color:codedetacouleur; color:couleurdetapolice;} 
...
...
</style>


Et après tu fais pareil pour chacun.
@ pluche.
0
jguy
13 mars 2008 à 00:33
Merci pour l'infirmation.

Concernant les polices de carartères cela ne fonctionne sur IE mais dans mon script j'ai aussi un select pour le choix de couleur et pour la couleur de la police avec un ID cela fonctionne très sur ID



Merci
0