How to style the browser's autocomplete dropdown box? - html

As you see, the whitebox are my often used usernames.
The autocompletion box has a white background. Is it possible to change it to whatever I want?

It is not possible to modify the browsers' native functionality.

One can't possibly style the autocomplete dropdown since it's not in the DOM.

Related

How can one prevent the title tooltip from being shown, but allow :hover to still be used?

Currently working with a reddit theme, which only allows CSS to be changed. In these themes, there are text flairs which we have replaced with background images. When you hover over one, it shows a tooltip with the text. This is a default reddit feature and cannot be changed.
What we're trying to do is display the title attribute in a much cleaner way. We really dont have any way of doing this other than using :hover:after, but setting pointer-events to none prevents :hover from showing up, presumably because pointer-events makes the element click-through.
Is there any way to bypass this and use our :hover tag?

Option as HTMLElement

I want to have a radio button input but instead of mere circles I would prefer another html element (including structure) to illustrate the choices. I thought this might work with the appearance style, but it does not work (probably because the input[radio] might not contain other elements.
Is there any way of styling an input radio, so it displays another HTMLElement instead of its circle?
Why not just leave them radio buttons but make the entire image clickable with label tags?
You might want to look at Uniform. Its a nice and easy way to have complete design control over form elements. Indeed it does require JavaScript but if its not enabled by default Uniform degrades gracefully offering the standard form functionality.
Some browsers allow you to override the settings, but you are going to have to do some super CSS tricks to get it to work.
http://acidmartin.wordpress.com/2009/07/17/using-css-to-style-radiobuttons-and-checkboxes-for-safari-and-chrome/
is a good site that describes how to do what you are talking about. They use a sprite sheet and the browser specific -appearance style to change the look of the box dependent on state.

Style radio button with custom images

How can I remove classic circle of radio button and use instead a custom icon?
Is it possible?
Thanks
You might want to look at Uniform. Its a nice and easy way to have complete design control over form elements. Indeed it does require JavaScript but if its not enabled by default Uniform degrades gracefully offering the standard form functionality.

changing the color of the little popup that comes on mouseover "title"

is it possible to change the formatting of the little yellow box that popups on mouseover, the one that is specified with the title attribute?
For example changing the yellow color for the background or the font color.
Thanks,
It's not possible. As random hints, it's specific to how browsers are implemented. It's intended more for general accessibility purposes. You should look into using JQuery, there are loads of plugins for creating tooltips.
http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/
There will be plugins that can be configured to automatically use the value you specified in the title attribute for the content of the tooltips.

How to style select drop down?

I am on a mac running firefox. I have a website and the select dropdown box has a funny style:
When I look at other websites in the same browser they look different:
Or even at my code here: jsFiddle
What could possibly be causing my website to display how it is because as I understand it you have very little control over how select boxes are displayed?
Thanks
Are you using CSS to format <select>? Or a CSS reset?
If you use some rules like border or background, the default style disappears and you get this grey box..
You should remove those CSS settings.
The default dropdowns styling vary across browsers. Unfortunately there's no real CSS way to restyle them.
That said, you could use a jQuery plugin such as this: Custom Select Box which I've used in the past to good effect.
The second example is displayed using system presentation of select. The first one does not look like a system select because likely some custom styling applied which does not more than just resets the system presentation.
It is generally not possible to style HTML input fields other than text fields effectively. To do that developers usually re-implement input controls using complex HTML, this is suggested by Ian Devlin.