2017-02-04 45 views
0

我用下面的腳本& CSS使select按預期使用selectize插件工作。所有功能都可以。選擇與國旗圖像 - 邊框CSS修復

http://codepen.io/venkatTDG/pen/LxmwPL

JS:

var COUNTRIES=[ 
{ code:"ch", name:"中文"}, 
    { code:"jp", name:"Japan"}, 
    { code:"kr", name:"Korea"}, 
    { code:"vn", name:"Vietnam"}, 
    { code:"uk", name:"United Kingdom"} 
]; 


$('#country-selectize').selectize({ 
maxItems: 1, 
labelField: 'name', 
valueField: 'code', 
plugins: ['remove_button'], 
searchField: ['name', 'code'], 
options: COUNTRIES, 
preload: true, 
persist: false, 
render: { 
    item: function(item, escape) { 
     return "<div><img src='' class='flag flag-" + escape(item.code) + "' alt='flag' />&nbsp;" + escape(item.name) + "</div>"; 
    }, 
    option: function(item, escape) { 
     return "<div><img src='' class='flag flag-" + escape(item.code) + "' alt='flag' />&nbsp;" + escape(item.name) + "</div>"; 
    } 
}, 
}); 

需要CSS的幫助。不知道爲什麼我在圖像周圍獲得1px邊框顏色。嘗試以不同的方式刪除..但它不適合我。

任何人請幫忙指導解決這個問題?

感謝

回答

0

這是因爲你使用的圖像標籤與源=「」,這是造成與圖像替代文本邊框輪廓即flag

所以使用範圍,而不是像標籤

item: function(item, escape) { 
    return "<div><span class='flag flag-" + escape(item.code) + "' />&nbsp;" + escape(item.name) + "</div>"; 
}, 
option: function(item, escape) { 
    return "<div><span class='flag flag-" + escape(item.code) + "' />&nbsp;" + escape(item.name) + "</div>"; 
} 

Updadated code