How to change CSS of Search module in the top

Hi!
How can I change the look and position of search module in the top of the page of Storefront to a basic search input field like my attached image.
I´m glad if you could help.

Regards

Hi,
officially we cannot help in customizations but I can give you two tips:

1) Search icon , use this code of course with your own image and url inside, this will override demo search icon

.gk-icon-search::before {
content: url(new-search-icon.png) !important;
}

if we talk about padding inside search input field, use

.box .search .inputbox, .box .search #mod-search-searchword {
padding: 4px 10px !important;
}

But the main part of appearance request some hard-code:
1) You have to create a new module position before "cart" : templates/gk_storefront/layouts/default.php
2) Publish there any search module you need
3) Create for them new styles and using css fix appearance of other elements on this same row

Thanks!
Ok I will try this.

Regards