How to keep the original css on an input linked to an instantsearch widgets.searchBox

Question

I was looking at the documentation of InstantSearch and I don't understand some things about the searchBox.

I would like to use a searchBox. I already have my own styled inputBox for the user to write. So I would like to be able to keep my css. Then, i wrote :

jobSearchIndex.addWidget(
widgets.searchBox({
    container: '#mySuperCuteBox',
    placeholder: 'I'm a cute box!',
    cssClasses: {
        input: 'myCuteCssClass',
    }
})
);

The problem is, that a weird instantsearch css selector overide some of my css and add style I don't need/want. I don't know how to get just my css...

I also tried something like :

jobSearchIndex.addWidget(
    widgets.searchBox({
        container: '#mySuperCuteBox',
        placeholder: 'I'm a cute box!',
    })
);

but it is not better.

I have also seen that in my render, i can see something like :

<input id="mySuperCuteBox" name="cuteName" class="myCuteCssClass ais-search-box--input" autocapitalize="off" autocomplete="off" autocorrect="off" placeholder="I'm a cute box!" role="textbox" spellcheck="false" value="bo" type="text">

Is there a simple way to activate the autocomplete="on" ? I tried to have a look on : https://github.com/algolia/instantsearch.js/blob/develop/dev/app/jquery/stories/autocomplete.stories.js But it is not really userfriendly for a novice such as me :(... I just felt flooded by so much information and I cannot figure out how to connect all this to my searchbox...

If someone can enlighten me about this, that would be great! :)

Thank you