Changer font-size sur un select avec options

Version imprimable

Bonjour,

J'ai crée un dropdownlist en HTML via les balises <select> et <option> . J'arrive à augmenter ou diminuer le 'font-size des éléments de la liste mais je n'arrive pas à agrandir le font-size de l'élément sélectionné pour qu'il soit plus grand lors de son affichage à l'écran.

Avez-vous une solution ?

Merci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form id="myForm" method ="post" action="MyServlet" data-ajax="false">
	<input name="streetName" id="streetName" placeholder="Street" value="" type="text">
	<input name="streetNumber" id="streetNumber" placeholder="N°" value="" type="text">
	<input name="zipCode" id="zipCode" placeholder="Zip Code" value="" type="text">
	<input name="city" id="city" placeHolder="City" value="" type="text">
	<select name="select-country" id="country">
    		<option selected="selected" value="select a country">
    					Select a country
    		</option>
    		<option value="country1">country1</option>
   		<option value="country2">country2</option>
   		<option value="country3">country3</option>
   		<option value="country4">country4</option>
 
    		</select>
 
	<a id="validationBtn" data-role="button" data-theme="b" data-ajax="false">Valider</a>
</form>

08/10/2013, 09h46
saymoneu
Bonjour,

Pour modifier la taille des éléments de la liste, il faut sélectionner en css les <option>, pour modifier la taille de l'élément qui apparait sélectionné (en haut), le <select>.
Vous pouvez également appliquer le style sur ce sélecteur pour assurer le coup
Code:

1 2 3 option[selected="selected"]{ ... }
Ca devrait faire l'affaire.
08/10/2013, 23h51
dark0502

J'ai essayé votre morceau de code. Les <option> que j'ai séléctionné sont agrandis sauf que je voulais qu'ils s'agrandissent non pas dans la liste mais plutôt qu'ils apparaissent plus grand sur l'affichage.
09/10/2013, 00h01
Invité

Bonjour,
il faut poster TON code. On ne peut pas le deviner.
09/10/2013, 00h24
dark0502
Voici le code de ma page JSP pour ce qui est de ma liste déroulante.
Code:

1 2 3 4 <select name="select-country" id="country"> <option selected="selected" value="select a country">Select a country</option> ... </select>
J'ai remarqué en faisant une inspection d'élément dans firefox que l'élément sélectionné se trouvait dans un span qui lui se trouvait dans un span qui lui se trouvait dans un span.
Du coup, dans mon css, j'ai ajouté ces lignes-là et ça fonctionne.
Code:

1 2 3 span > span > span { font-size : 3em; }
Existe-t-il un moyen plus propre ?
09/10/2013, 00h28
Invité

PAS d'autre langage que CSS et HTML !

Montre-nous le code html généré ("ctrl" + "U").
Et un code CSS nécessaire et suffisant.

C'est quoi, cette histoire de span?? 8O