Выделить с изображением флага - граница исправления CSS

Question

Я использовал ниже скрипт & CSS, чтобы сделать выбор работы как ожидалось, используя selectize plugin. Все в порядке.

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 цвет границы вокруг изображения. Пробовал по-другому, чтобы удалить .. но это не работает для меня.

Любой, пожалуйста, помогите решить эту проблему?

Благодаря

Answer 1

Это потому, что вы используете тег изображения с источником = «», это вызывает граничат контур с альтернативным текстом для изображения, т.е. 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