Как применить определенный стиль к этому полю ввода

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 (Placeholder-size/font/color, Height, border, blue border on focus), как вы видите в коде- пример (input и textarea в этом примере). Как я могу это сделать?

Я использую SASS для компиляции статического CSS - возможно, я мог бы @include UIkit-источник и использовать его для перезаписи vue-tags-input?

К сожалению, я не знаю достаточно CSS, и поэтому я очень рад за пример.

Заранее спасибо.

Answer 1

Вы бы либо @import UIkit к вашей таблице стилей 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, чтобы я знал результаты своих изменений.