Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add images in select list?

Tags:

html

css

I have a select list of genders.

Code:

<select> <option>male</option> <option>female</option> <option>others</option> </select>   

I want to use an image in drop down list as drop-down-icon.jpeg.

I want to add a button in place of drop down icon.

How to do that?

like image 570
Mayur Avatar asked Jun 03 '10 12:06

Mayur


People also ask

Can I put image in select option?

We can add an image in select options using "select2" jQuery library.

How do I add an image to a select tag?

q=html+select+image. as a general solution: if you can, get your icons together as SVGs, import them into a font of your choice into the personal Unicode range, use that font in your <option> s; supported by everything up from IE 8.0, small and simple.

How do I add icons to the Select option?

To add icons in select option text we have to use the bootstrap-select plugin, which is a great plugin for customizing plain HTML select with some great customization options using bootstrap style. With this plugin, we can style the select element with only simple data attributes or initialize with Javascript.

How do I create a dropdown image in HTML?

HTML) Use any element to open the dropdown content, e.g. a <span>, or a <button> element. Use a container element (like <div>) to create the dropdown content and add whatever you want inside of it. Wrap a <div> element around the elements to position the dropdown content correctly with CSS.


2 Answers

In Firefox you can just add background image to option:

<select>   <option style="background-image:url(male.png);">male</option>   <option style="background-image:url(female.png);">female</option>   <option style="background-image:url(others.png);">others</option> </select>  

Better yet, you can separate HTML and CSS like that

HTML

<select id="gender">   <option>male</option>   <option>female</option>   <option>others</option> </select>   

CSS

select#gender option[value="male"]   { background-image:url(male.png);   } select#gender option[value="female"] { background-image:url(female.png); } select#gender option[value="others"] { background-image:url(others.png); } 

In other browsers the only way of doing that would be using some JS widget library, like for example jQuery UI, e.g. using Selectable.

From jQuery UI 1.11, Selectmenu widget is available, which is very close to what you want.

like image 70
vartec Avatar answered Sep 29 '22 17:09

vartec


You can use iconselect.js; Icon/image select (combobox, dropdown)

Demo and download; http://bug7a.github.io/iconselect.js/

enter image description here

HTML usage;

<div id="my-icon-select"></div> 

Javascript usage;

    var iconSelect;      window.onload = function(){          iconSelect = new IconSelect("my-icon-select");          var icons = [];         icons.push({'iconFilePath':'images/icons/1.png', 'iconValue':'1'});         icons.push({'iconFilePath':'images/icons/2.png', 'iconValue':'2'});         icons.push({'iconFilePath':'images/icons/3.png', 'iconValue':'3'});          iconSelect.refresh(icons);      }; 
like image 33
bugra ozden Avatar answered Sep 29 '22 17:09

bugra ozden