如何在 Smelte.js 中使选择元素透明？

Question

我正在使用 Svelte 和材料设计库进行一个项目Smelte：

<script>

const currency = [
    { value: 1, text: "EUR" },
    { value: 2, text: "GBP" },
    { value: 3, text: "USD" }];

</script>

<Smelte.Select label="Currency" class="bg-transparent inline-block">
    <div slot="options" class="elevation-1">
        {#each items as item}
            <div class="p-2">{item.text}</div>
        {/each}
    </div>
</Smelte.Select>

我尝试使用 CSS 使选择框透明失败：background-color: transparent 和 appearance: none 都失败了。

我怎样才能做到这一点？

编辑

我在 HTML 中使用的选择标签会生成一个“只读”类型的输入，CSS 选择器 input:read-only 不针对该输入。

观察

在 Angular Material 中，可以将 appearance="standard" 添加到选择元素中，使其具有经典的下划线外观。它似乎在 Smelte 中不起作用。

Answer 1

我在这里查看https://svelte.dev/examples#select-bindings，我可以简单地更改该选择框的背景颜色。

select {
    background-color: transparent;
}

也许你的带有透明背景颜色的 css 规则被另一个 css 规则覆盖了？您可以尝试将 !important 添加到您的 css 规则或使选择器更重，例如

form#id_of_parent_form select#my_select_id {
    background-color: transparent;
}