How to apply specific style to this input box

Question

I am using the vue-tags-input (https://github.com/JohMun/vue-tags-input) - and now I'd like to apply the UIKit form styling to it (https://getuikit.com/docs/form).

I prepared this as an example here: https://codepen.io/spqrinc/pen/vQjRjB

This is the rendered tags-input:

<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>

Now I'd like to overwrite the tag's form (the css class is not changeable) to behave just like the UIKit (Placeholder-size/font/color, Height, border, blue border on focus) just like you see in the codeine-example (input and textarea in this example). How can I do that?

I am using SASS to compile the static css - maybe I could @include the UIkit-source and use it to overwrite the vue-tags-input?

Unfortunately I don't know enough CSS and so I am very happy for an example.

Thanks in advance.

Answer 1

You would either @import the UIkit to your SASS stylesheet or you would make your own stylesheet that you make sure is loaded after it, either method works but by @import'ing the UIkit stylesheet you can e.g. alter variables so their code is compiled differently, but if you're not good at CSS or don't wanna learn how their project is structured so you import the right files in the right places then it would be easier to just go with you own stylesheet.

The below CSS would change the background color of the tags. If a value you change doesn't change you can try using !important tag on that value to force it to be used, just make sure your stylesheet is added AFTER the UIkit stylesheet and it'll work.

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

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

You can place that in any CSS/SASS/LESS file and it'll change the color of the tags.

As a tip, if you right click on something in a website and press inspect it'll open the inspector where you can try adding new CSS to elements or classes and see the effects directly. I often use this to try out stuff before I recompile the CSS so I know the effects of my changes.