使用标志图像选择 - 边框 CSS 修复

Question

我使用下面的脚本 & CSS 使 select 使用 selectize 插件按预期工作。功能一切正常。

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

这是因为您使用的是带有 source="" 的图像标签，这会导致带有替代文本的图像边框轮廓，即 flag

所以使用 span 而不是图片标签

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

使用标志图像选择 - 边框 CSS 修复

Selectize with flag image - border CSS fix

css

selectize.js