如何在冶炼.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不针对该输入。

观察

在角度材质中，可以向选择元素添加appearance="standard"，使其具有经典的下划线外观。它似乎在冶炼厂不起作用。

Answer 1

我 https://svelte.dev/examples#select-bindings 这里看了一下，我能够简单地更改该选择框的 bg 颜色。

select {
background-color: transparent;
}

也许您具有透明BG颜色的CSS规则被另一个CSS规则覆盖？您可以尝试将 ！important 添加到您的 css 规则中或使选择器更重，例如

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