input 外面包一層父極，圖片作為背景圖，input設(shè)置背景為透明，background:transparent;
不考慮ie，給你的小圖標(biāo)那一層加屬性：pointer-events: none;

你外層用一個label 包住就能實現(xiàn)你這個功能，要不給 圖片 加事件 可以利用 jquery的 trigger方法 觸發(fā) select picElement(圖片元素).on('click',function(){

selectElement下拉框元素）.trigger("select");

})

如果用的是select的標(biāo)簽的話，可以用透明度遮蓋，調(diào)一下層級，直接點擊的就可以的，如果想用js解決的話，可以根據(jù)樓上的那樣寫

抱歉抱歉，沒有測試直接發(fā)錯誤代碼，對不起；看這個 demo

原理：
1、你可以直接通過修改 select 的 size 屬性來實現(xiàn)，但是這樣比較丑，很明顯；
原來：

修改 size:

跟原生比丑在兩點：

1）位置上移了
2）滾動條出現(xiàn)了

2、比較好的實現(xiàn)，就是通過 js clone 一個 select，原來的 select 暫且稱為 selectA，克隆后的 select 暫且稱為 selectB；

題主這邊點擊 img 的時候，修改 selectB 的 size，這個時候option就都出來了，然后把它往下移到selectA 下面，解決了位置的問題；

然后修改寬度和overflow屬性，一般情況下，比如 option 少于 10條時，不顯示滾動條；大于 10 條時，再顯示滾動條；這樣就模擬了selectA 的點擊情況，解決了滾動條的問題；

最后再監(jiān)聽 selectB 的 change 事件來修改 selectA 的值；

完

參考文檔：

Simulate click on select element with jQuery