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

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

0 голосов
/ 25 ноября 2018

Я использую 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 и поэтому я очень раддля примера.

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

1 Ответ

0 голосов
/ 25 ноября 2018

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

...