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

Question

我正在使用 Svelte 和 material 设计库进行一个项目 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使select框透明失败：background-color: transparent和appearance: none都有失败。

我怎样才能做到这一点？

编辑

我在 HTML 中使用的 select 标签生成 'readonly' 类型的输入，CSS select 或 input:read-only不是目标。

观察

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

Answer 1

我看了这里 https://svelte.dev/examples#select-bindings，我可以简单地更改那个 select 框的背景颜色。

select {
    background-color: transparent;
}

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

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

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

How can I make a select element transparent in Smelte.js?

css

forms

svelte

编辑

观察