Improve styling when bulma is not used (expecially for multiple selection)

[pstanoev]

The current CSS in the component is very minimal and doesn't look good if Bulma is not used. Improvements to the UI (borders, colors, arrow icon) are needed.

The multiple selection component has severe visual bugs.

[Wobbley]

I am not quite sure how it is supposed to be styled after reading the Readme.MD

I added a className with a custom CSS style then a style in the CSS, without any luck, what am I doing wrong?

<AutoComplete className="teststyle" items="{items}" bind:selectedItem="{selectedColor}"/>

and then under style:

<style>
    .teststyle {
        background-color: red;
    }
</style>

[joetm]

Pretty impossible to apply styles to the autocomplete at the moment. I tried every combination I could think of. Styles in svelte, giving the component classnames, using the classes from the DOM - it just does not apply any styles.

[Wobbley]

Pretty impossible to apply styles to the autocomplete at the moment. I tried every combination I could think of. Styles in svelte, giving the component classnames, using the classes from the DOM - it just does not apply any styles.

Good to know it's not just me, I went with https://github.com/rob-balfre/svelte-select instead. It is more complicated but at least it has some styling, even if it is cumbersome.

[joetm]

Okay, I found out how it's done. You can use global to manipulate the style of child components:

  .parent :global(.childClass) {
    color: red;
  }

[stephenswetonic]

Okay, I found out how it's done. You can use global to manipulate the style of child components:

  .parent :global(.childClass) {
    color: red;
  }

Just wondering what is the parent and child class in this case? The only way I found to apply styles is with tailwind utility classes, but it doesn't correctly position the component.