jgthms / bulma

Modern CSS framework based on Flexbox
https://bulma.io
MIT License
49.14k stars 3.95k forks source link

Not applying color to select #3755

Closed lolzivkovic closed 4 months ago

lolzivkovic commented 5 months ago

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma v1.0.0 My browser is: Firefox & Chromium

I am sure this issue is not a duplicate

Description

Select colors like: is-success, is-primary, is-warning, is-danger are not changing color of the select in any way

Steps to Reproduce

Apply "select is-danger" to the div which is a parent of select element.

Expected behavior

Expecting to change the border color and carret down icon color to red.

Actual behavior

It stays the same as no "is-danger" class is being applied.

veelci commented 5 months ago

This can also be seen in the documentation for select colors.

brussens commented 5 months ago

@veelci apparently the documentation indicates the class assignment incorrectly. The following code works fine.

<div class="field">
    <label class="label" for="my-dropdown">My Dropdown</label>
    <div class="control select">
        <select id="my-dropdown" class="select is-danger">
            <option value="">Select value...</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </div>
</div>

In any case, the situation with the need to use an additional wrapper around the select tag is not clear

willoma commented 4 months ago

With the previous version of Bulma, we did exactly as explained in the docs:

<div class="select is-primary">
  <select>
    <option>Select dropdown</option>
    <option>With options</option>
  </select>
</div>

I think the Bulma v1.0 SASS code is wrong, the previous method should be kept (because of https://bulma.io/documentation/start/migrating-to-v1/#what-remains-the-same).

willoma commented 4 months ago

The problem is here:

https://github.com/jgthms/bulma/blob/72e99d1bf206e0c0a697b926282a0bea5dd23059/sass/form/shared.scss#L61

this line must be changes to:

.#{iv.$class-prefix}select {

I was about to make a PR, but I don't have the tools installed on my computer right now to generate the CSS files, therefore I think there is no point in doing a partial PR only on this file.