yaragallamurali Posted September 30, 2013 Share Posted September 30, 2013 Hi the problem is defining the font only to the text displayed in the dropdown. In detail when we click on the drop down it shows all the available options. these options should have normal or default font size but when i select an option that gets displayed in the dropdown. so this displayed text should have a different font size. Is this possible. if so what is the css for this? Link to comment Share on other sites More sharing options...
yaragallamurali Posted September 30, 2013 Author Share Posted September 30, 2013 Any help will be deeply appreciated. Link to comment Share on other sites More sharing options...
niche Posted September 30, 2013 Share Posted September 30, 2013 Off hand I'd say font-family, but you should post your relevant code using the code tags. Else, we're just guessing. Link to comment Share on other sites More sharing options...
yaragallamurali Posted September 30, 2013 Author Share Posted September 30, 2013 Off hand I'd say font-family, but you should post your relevant code using the code tags. Else, we're just guessing. If i use the above said style to the <select> tag it applies to all the options but my requirement is different. only the text that is visible , i mean selected text should have a different font. when clicked on the dropdown when all the other options are shown they should have a different font, may be normal font size. Link to comment Share on other sites More sharing options...
davej Posted September 30, 2013 Share Posted September 30, 2013 (edited) What you seem to be saying is that the dropdown shows all the options but you want the currently selected option to be a different font so that if you open up the dropdown again the currently selected option will be obvious. I think you would need Javascript for that. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Choose</title><style>.sel{font: italic bold 14px/30px Georgia, serif;color: red;}</style><script>function setfont(e){var n = e.selectedIndex;for(var i=0 ; i<e.length ; i++){if ( i==n ){ e[i].className = 'sel';}else{ e[i].className = '';}}}</script></head><body><h3>Choose:</h3><select onchange="setfont(this);"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option></select> </body></html> Edited September 30, 2013 by davej Link to comment Share on other sites More sharing options...
yaragallamurali Posted September 30, 2013 Author Share Posted September 30, 2013 (edited) What you seem to be saying is that the dropdown shows all the options but you want the currently selected option to be a different font so that if you open up the dropdown again the currently selected option will be obvious. I think you would need Javascript for that. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Choose</title><style>.sel{font: italic bold 14px/30px Georgia, serif;color: red;}</style><script>function setfont(e){var n = e.selectedIndex;for(var i=0 ; i<e.length ; i++){if ( i==n ){ e[i].className = 'sel';}else{ e[i].className = '';}}}</script></head><body><h3>Choose:</h3><select onchange="setfont(this);"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option></select> </body></html> This does not work. I have checked it. I also have red some docs and they says that setting the font to the options of select tag is not possible. It might work in some and may not in remaining browsers. One more clarification is you got my question wrong. What i want is the visible text in the select box should be in different font but all the options in the drop down should be in normal font. Edited September 30, 2013 by yaragallamurali Link to comment Share on other sites More sharing options...
davej Posted September 30, 2013 Share Posted September 30, 2013 (edited) Hmmm... it worked for me in FF23 but I see it doesn't work in IE9. The only thing I can seem to get working in IE9 is color... but this affects the item in the list. function setfont(e){var n = e.selectedIndex;for(var i=0 ; i<e.length ; i++){if ( i==n ){e[i].style.color = 'red';}else{e[i].style.color = 'black';}}} Edited September 30, 2013 by davej Link to comment Share on other sites More sharing options...
yaragallamurali Posted September 30, 2013 Author Share Posted September 30, 2013 Hmmm... it worked for me in FF23 but I see it doesn't work in IE9. The only thing I can seem to get working in IE9 is color... but this affects the item in the list. function setfont(e){var n = e.selectedIndex;for(var i=0 ; i<e.length ; i++){if ( i==n ){e[i].style.color = 'red';}else{e[i].style.color = 'black';}}} color and background-color are only the properties that we can apply for options and nothing else can be applied if we want to have consistency across browsers. So applying font seems to be impossible in all the browsers. Link to comment Share on other sites More sharing options...
davej Posted September 30, 2013 Share Posted September 30, 2013 Hi the problem is defining the font only to the text displayed in the dropdown. In detail when we click on the drop down it shows all the available options. these options should have normal or default font size but when i select an option that gets displayed in the dropdown. so this displayed text should have a different font size. Is this possible. if so what is the css for this? There is some confusion regarding whether you wanted to style the selected item in the list or only the top visible item in the closed list, but in either case you would probably have to test each browser because they are clearly different. Link to comment Share on other sites More sharing options...
yaragallamurali Posted September 30, 2013 Author Share Posted September 30, 2013 There is some confusion regarding whether you wanted to style the selected item in the list or only the top visible item in the closed list, but in either case you would probably have to test each browser because they are clearly different. only the top visible item that gets displayed in the select box after closing the list., Link to comment Share on other sites More sharing options...
davej Posted September 30, 2013 Share Posted September 30, 2013 (edited) So before you open the list, is there a visible option, or is the top position blank? This sort-of works... or at least provides a different option... <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Choose</title><style>.plain{font: 12pt/30pt Ariel;color: black;}.sel{font: italic bold 14pt/30pt Georgia, serif;color: red;}</style><script>function setfont(e){e.className = 'sel';}</script></head><body><p>Check various browsers to see how they differ.</p><h3>Choose:</h3><select onchange="setfont(this);" class="plain" > <option class="plain" value="volvo">Volvo</option> <option class="plain" value="saab">Saab</option> <option class="plain" value="mercedes">Mercedes</option> <option class="plain" value="audi">Audi</option></select> </body></html> Edited September 30, 2013 by davej Link to comment Share on other sites More sharing options...
yaragallamurali Posted October 1, 2013 Author Share Posted October 1, 2013 ok will try. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now