フラグを使って選択します。画像の境界線CSSの修正

Question

以下のスクリプト& CSSを使用して、selectizeプラグインを使用して期待どおりの選択を行います。すべての機能は正常です。

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