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

Question

我使用下面的脚本和 CSS 使 select 使用 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

这是因为您正在使用带有 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