jenish_shah Posted March 8, 2011 Share Posted March 8, 2011 Hi All,I am trying to create HTML dropdown with select and option. I am planning to put Country names and their flag image as a part of the option. But I dont have any idea how can I combinely put both things as an option.I want to create something like small image of country flag + country name as a part of option.Any help would be appreciated.Thanks,Jenish Link to comment Share on other sites More sharing options...
thescientist Posted March 8, 2011 Share Posted March 8, 2011 I'm not sure if putting an image tag inside an option tag will work. have you tried though? <select> <option><img src="image_path.jpg"></img>Country A</option></select> edit: upon searching, it appears another technique is employed...http://www.google.com/#hl=en&sugexp=gs...6629feb59a1e65a Link to comment Share on other sites More sharing options...
jenish_shah Posted March 15, 2011 Author Share Posted March 15, 2011 Hi,I dint get your answer. What technique you are talking about?Jenish I'm not sure if putting an image tag inside an option tag will work. have you tried though?<select> <option><img src="image_path.jpg"></img>Country A</option></select> edit: upon searching, it appears another technique is employed...http://www.google.com/#hl=en&sugexp=gs...6629feb59a1e65a Link to comment Share on other sites More sharing options...
thescientist Posted March 15, 2011 Share Posted March 15, 2011 did you try looking at any of the links? I think one technique is using a list to mock a dropdown, and another was applying a class to each <option> tag and giving it a background image.edit: I can't vouch for them personally, but at least it's somewhere to start. Link to comment Share on other sites More sharing options...
jenish_shah Posted March 15, 2011 Author Share Posted March 15, 2011 I tried below solution<style type="text/css">option.opt1 {background: url(small.gif); background-repeat : no-repeat; padding-left: 25px;}option.opt2 {background: url(small.gif); background-repeat : no-repeat; padding-left: 25px;}</style><select><option class="opt1">Option 1</option><option class="opt2">Option 2</option><option style="background: url(small.gif); background-repeat : no-repeat; padding-left: 25px;">Test 1</option> </select>This code shows proper gif before option when I click on dropdown menu. But when we select any option from the list, then it does not show any image in selected box. It just shows the text.Do you know the reason?Thanks,Jenish did you try looking at any of the links? I think one technique is using a list to mock a dropdown, and another was applying a class to each <option> tag and giving it a background image. Link to comment Share on other sites More sharing options...
thescientist Posted March 15, 2011 Share Posted March 15, 2011 so you are saying they show up on page load, but disappear after you select one? Does that happen for both the one that is a class, and for the one with the inline style? Also, what browser are you using? Link to comment Share on other sites More sharing options...
jenish_shah Posted March 16, 2011 Author Share Posted March 16, 2011 Yes you got it right. It shows image and text for all the options when I click on drop down. But when I select any option, the textbox gets only text and not image.This happens for both the solutions in FF. so you are saying they show up on page load, but disappear after you select one? Does that happen for both the one that is a class, and for the one with the inline style? Also, what browser are you using? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.