2017-02-04 5 views
0

아래 스크립트 & CSS를 사용하여 selectize plugin을 사용하여 예상대로 작동하도록 선택합니다. 모든 기능이 정상적으로 작동합니다.플래그로 선택 이미지 테두리 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