带有select2 jquery插件的Bulma css答案

【问题标题】：Bulma css with select2 jquery plugin带有select2 jquery插件的Bulma css
【发布时间】：2017-04-13 15:27:41
【问题描述】：

我尝试使用Bulma css 框架实现select2 插件，但前端看起来很混乱。我使用 bootstrap 进行了尝试，是的，没有问题，因为 select2 具有 bootstrap 兼容性。

HTML：

<div class="field">
  <label class="label">Role</label>
     <p class="control">
         <span class="select is-fullwidth">
            <select2 v-model="form.role"
                    placeholder="Select Role"
                    name="role"
                    :value="form.role"
                    :multiple="false"
             >
                <option></option>
                 <option v-for="role in roles" :value="role.id">{{ role.display_name }}</option>
         </select2>

     </span>
   </p>
</div>

【问题讨论】：

标签： jquery-select2 bulma

【解决方案1】：

我做到了，也许我的例子可以帮助你。

查看

<div class="field">
    <label class="label">Hair</label>
    <div class="control">
        <select2 class="is-medium" v-model="post.custom_data.hair" :options="{}">
            @foreach (config('post.cat.hair') as $id => $value)
                <option value="{{ $id }}">{{ __($value) }}</option>
            @endforeach
        </select2>
    </div>
</div>

SASS

.select2-wrapper {
    .select2-container {
        .select2-selection {
            transition: border-color $speed;
            font-family: $family-sans-serif;
            height: 2.285em;
            line-height: 1.5;
            font-size: 1rem;
            outline: none !important;
            display: inline-flex;
            align-items: center;
            width: 100%;
            border-color: $border;
            border-radius: $radius;
            &:hover {
                border-color: $border-hover;
            }
            .select2-selection__rendered {
                padding-left: 0.75em;
                padding-right: 0.75em;
            }
            .select2-selection__arrow {
                display: none;
            }
        }

        &.select2-container--open {
            .select2-selection {
                border-color: $primary;
                &:hover {
                    border-color: $primary;
                }
            }
        }
    }

    &.is-medium {
        .select2-container {
            .select2-selection {
                font-size: $size-5;
            }
        }
    }
    &.is-large {
        .select2-container {
            .select2-selection {
                font-size: $size-4;
            }
        }
    }
}

.select2-container {
    .select2-dropdown {
        border-color: $primary;

        .select2-search {
            margin: 10px;
            .select2-search__field {
                @extend .input;
                border-radius: $radius !important;
            }
        }

        .select2-results__options {
            max-height: 210px;
            .select2-results__option {
                padding: 0.75em;
                font-family: $family-sans-serif;
                font-size: 1rem;

                &.select2-results__option--highlighted {
                    background: $primary;
                }
            }
        }
    }
}

结果

希望对你有帮助^^

【讨论】：

谢谢@josec89，请问你把这个sass文件放在哪里了？
嗨@younel 我把那个sass放在我的项目结构中（我想我称之为components/select2.scss。但这不重要。顺便说一句，我使用了一些在布尔玛定义的变量sass 文件（例如 $primary），并且可能还有其他变量仅在我的代码中有效，如果您的样式未编译，请删除它们
仅供参考，我已经通过隐藏下拉箭头为最新版本的 Bulma 修复了这个问题（Bulma 有自己的箭头添加到元素中）。

【解决方案2】：

.select2-container {
  .select2-selection--single {
    height: auto !important;
    padding: 3px 0 !important;
    border: 1px solid #dbdbdb !important;

    .select2-selection__arrow{
      top: 5px !important;
    }

    .select2-selection__placeholder {
      color: #dbdbdb !important;
    }
  }

  .select2-dropdown {
    border: 1px solid #dbdbdb !important;
    border-top: 0 !important;

    .select2-search {
      margin: 5px;

      .select2-search__field {
        padding: 10px !important;
        border-radius: 3px !important;
        font-size: 1rem;
        height: 2.25em;
        box-shadow: inset 0 1px 2px rgba(10,10,10,.1);
        max-width: 100%;
        width: 100%;
        border-radius: 3px !important;
      }
    }

    .select2-results__options {
      max-height: 200px !important;

      .select2-results__option {
        padding: 0.37em 0.75em !important;
        font-size: 1rem;

        &.select2-results__option--highlighted {
        }
      }
    }
  }
}

我打开关于这个的问题。

https://github.com/jgthms/bulma/issues/1555

【讨论】：