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?
We can add an image in select options using "select2" jQuery library.
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.
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.
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.
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.
You can use iconselect.js; Icon/image select (combobox, dropdown)
Demo and download; http://bug7a.github.io/iconselect.js/
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); };
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With