Question

我正在使用vue-tags-input（https://github.com/JohMun/vue-tags-input）-现在我想对其应用UIKit表单样式（https://getuikit.com/docs/form）。

我准备在这里作为示例：https://codepen.io/spqrinc/pen/vQjRjB

这是呈现的标签输入：

<div data-v-7f2a58de="" class="vue-tags-input">
    <div data-v-7f2a58de="" class="input">
        <ul data-v-7f2a58de="" class="tags">
            <li data-v-7f2a58de="" tabindex="1" class="tag valid">
                <div data-v-7f2a58de="" class="content"><!---->
                    <div data-v-7f2a58de="" class="tag-center"><span data-v-7f2a58de="" class="">test</span> <!---->
                    </div> <!----></div>
                <div data-v-7f2a58de="" class="actions"><i data-v-7f2a58de="" class="icon-undo"
                                                           style="display: none;"></i> <i data-v-7f2a58de=""
                                                                                          class="icon-close"></i> <!---->
                </div>
            </li>
            <li data-v-7f2a58de="" tabindex="2" class="tag valid">
                <div data-v-7f2a58de="" class="content"><!---->
                    <div data-v-7f2a58de="" class="tag-center"><span data-v-7f2a58de="" class="">test2</span> <!---->
                    </div> <!----></div>
                <div data-v-7f2a58de="" class="actions"><i data-v-7f2a58de="" class="icon-undo"
                                                           style="display: none;"></i> <i data-v-7f2a58de=""
                                                                                          class="icon-close"></i> <!---->
                </div>
            </li>
            <li data-v-7f2a58de="" class="new-tag-input-wrapper"><input data-v-7f2a58de="" type="text" size="1"
                                                                        placeholder="Add Tag"
                                                                        class="new-tag-input valid"></li>
        </ul>
    </div>  
</div>

现在，我想覆盖标签的形式（css类不可更改），使其表现得像UIKit（占位符大小/字体/颜色，高度，边框，焦点上的蓝色边框）一样，就像在可待因示例（在此示例中为input和textarea）。我该怎么办？

我正在使用SASS编译静态CSS-也许我可以@include的UIkit源代码并使用它来覆盖vue-tags-input？

不幸的是，我对CSS的了解不足，因此我很高兴举个例子。

谢谢。

Answer 1

您可以将UIkit @import插入SASS样式表，也可以制作自己的样式表以确保在其加载后，这两种方法都可以，但是通过@import设置UIkit样式表，您可以例如更改变量，以便它们的代码以不同的方式编译，但是如果您不擅长CSS或不想学习其项目的结构，因此可以在正确的位置导入正确的文件，那么使用自己的文件会更容易样式表。

下面的CSS会更改标记的背景颜色。如果您更改的值没有更改，则可以尝试在该值上使用!important标签以强制使用该标签，只需确保在UIkit样式表之后添加了样式表即可。

.vue-tags-input .tag {
    background: #333 !important;
}

https://codepen.io/anon/pen/vQrLqm

您可以将其放在任何CSS / SASS / LESS文件中，它将更改标签的颜色。

作为提示，如果右键单击网站上的内容并按inspect，它将打开检查器，您可以在其中尝试将新CSS添加到元素或类中并直接查看效果。在重新编译CSS之前，我经常用它来尝试一些东西，这样我就知道更改的效果。

如何将特定样式应用于此输入框

1 个答案: