styling the input box autocomplete

Question

I was wondering if it's at all possible to style the autocomplete box that appears from input fields.

( I know This question is the same but that doesnt have a answer and since its a few months old i figured i made a new post about it)

Screenshot

That image is of my login screen with the autocomplete box being all square and bulky compared to my input field. If it's not possible to style the box i'll simply turn autocomplette off but if it's at all possible i would be very interested.

New screenshot: enter image description here

Its currently in wordpress but its a standard function to come up with autocomplete suggestions. If you have a single input field on your website it will/could show. For your question you can just assume i only have 2 input fields and a submit button. — Marco Geertsma, Sep 19 '14 at 13:21
Maybe this would help: http://stackoverflow.com/questions/17838380/styling-jquery-ui-autocomplete — Florin Pop, Sep 19 '14 at 13:23
so styling the classes of the autocomplete didn't help or ..? - like the comment i've read on the other topic link you posted — Dennis Anderson, Sep 19 '14 at 13:50
@DennisAnderson It doesnt seem to recognise those class names. And since that field doesn't show in the inspect mode i cant see if the classes are correct or not. — Marco Geertsma, Sep 19 '14 at 13:52
is your website online? so we can see what we are dealing with? i need some to work with ;) — Dennis Anderson, Sep 19 '14 at 13:56
Unfortunatly its a login menu for an intranet im building so no, its not accessibel. I've added a new screenshot though — Marco Geertsma, Sep 19 '14 at 13:59
Could you do the "Force Element State" - Focus on the input field, so that the autocomplete box appears. and tell me if this shows a element or something — Dennis Anderson, Sep 19 '14 at 14:16
It does not, no class appears and the code doesnt change. I'm starting to wonder if this is browser related instead of code. — Marco Geertsma, Sep 19 '14 at 14:25

score 2 · Answer 1 · answered Sep 19 '14 at 14:40

2

Yeah you can't do that since it's browser based. Here's a great example in jQuery that uses autocomplete. I use it all the time for sites - super slick.

http://www.devbridge.com/sourcery/components/jquery-autocomplete/

answered Sep 19 '14 at 14:40

rmarq423

195
1
8

score 1 · Answer 2 · answered Sep 19 '14 at 14:31

You can't modify the browsers' native functionality. Your best option is to find a plugin that overrides the autocomplete drop-down functionality and modify the code and style to your liking. Please take a look at jQuery's autocomplete plugin. http://jqueryui.com/autocomplete/#custom-data

styling the input box autocomplete

2 Answers2