Blue x in the input "search" field


I have the following behaviour when using search bar:

Screenshot 2020-04-28 02.51.11

As you can see there are two x instead of one.

This happens when I manually import less stylessheets:

@import url('~vendors/framework7/framework7.less');
@import url('~vendors/framework7/components/elevation/elevation.less');
@import url('~vendors/framework7/components/form/form.less');
@import url('~vendors/framework7/components/grid/grid.less');
@import url('~vendors/framework7/components/input/input.less');

If I import bundle, i.e.

import 'framework7/css/framework7.bundle.css'

The issue goes away. Any ideas what to check or if I am missing any other imports?

You also need to include/import searchbar/searchbar.less as you are using it

My apologies, it was included in the import in my source code but I forgot to add it to my post.

That system blue icon overrides exactly in searchbar.less component, or you can add it to your CSS:

  input::-webkit-search-cancel-button {
    appearance: none;
    -webkit-appearance: none;