Background: I wrote a search box like a google search box. However, when I want to search a word, a box opens automatically under the search box, suggesting words based on the history of the words typed in that box. I have not coded the box for the suggestions; it is a browser's feature. The size, shape, and style of the box that provides the suggestions depend on the choice of browser.

Problem: I want to style this box without deactivating the browser suggestion box. In other words, I need to make the width, shape (curves) and shading proportional to the search box that I coded. I am looking only for pure CSS, HTML, and Vanilla Javascript solutions if this is possible at all.

An example is how Google has done it (please see the screenshot): enter image description here

If this is not possible, then I have to code everything myself. In that case, how can I have access to the history of the previous words which the browser stores?