I am creating a font dropdown list on a web page. I have styled each option element with the font that it represents:-
<option value="Arial, Helvetica, sans-serif" style="font-family: Arial,Helvetica,sans-serif;">Arial</option>
When I expand the dropdown it looks correct but when I select an item, the dropdown does not use the font of the selected option. Is there a way I can make it update the font when selecting options?
jsFiddle - http://jsfiddle.net/bq2d9/
Try add:
onChange="this.style.fontFamily=this.value;"
http://jsfiddle.net/bq2d9/5/
Do note that the font in the drop-down displays properly in Firefox, but not in Chrome. However, after selection, both will display the text in the correct font.
Chrome does not support different fonts in each selection option.
To get a cross-browser font selector that displays the font of each option, you will have to get a plugin.
Looking at jQuery plugins, there are a large number. It is unclear exactly which of them support individual styling. I can find a few where options can be individually styled, however, they also can look ugly. For the ones which look better, it is sometimes hard to know whether they can be individually styled.
The best I can find is jQuery-Font-Chooser - https://github.com/CD1212/jQuery-Font-Chooser. It looks good enough, and response time is ok.
Otherwise, for other plugins, you can search, for example, "jquery select box" or "jquery font selector".
Try this:
http://jsfiddle.net/Rp9gp/1/
Try this to change the style in the dropdown:
http://jsfiddle.net/Rp9gp/2/
In this case, you need some customization that every browser might not support and you will face problems like the one you mentioned. So I certainly recommend you to use a fully customized combobox. A jquery one might be good for you.
Here is the link to ComboBox plugin: http://archive.plugins.jquery.com/plugin-tags/combobox
Related
Can any browser developer, or anyone who knows why it is so difficult (if not impossible) to style the dropdown list of a <select>, there's any "real explanation" that prevents browsers treat the <select> <option> in a more convenient way.
Every time I see questions like How to modify CSS of a dropdown? in different sites that receive answers like
"It's not possible to style the dropdown list of a html select. But you can build your own dropdown list or use a framework like bootstrap."
or
"If you decide that it's absolutely a good idea to customize a dropdown, then you should use JavaScript".
And I really don't know why, I know now the <select>, I mean the container box, can be styled a little more using
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
And then giving our styles, which is not as simple as all say because we have to do some tricks to make it right, especially with the famous litter arrow.
As time passes we are neglecting such a simple and comfortable as the <select> element and almost all the developers opted to use some of the answers above and at least I still do not know why.
So at least I will be grateful if someone could help me.
Dropdown lists are highly dependent on the system they're running on. Just look what they look(ed) like on iOS:
The <select> element is giving you a uniform way to mark up the functionality of a list of options which can be selected. How that list is represented is entirely up to the browser, and the browser can implement it in the best possible way for the given circumstances. As such it makes no sense to try to "style" it in any way, because you cannot predict how it's going to be presented in the first place.
Usually every operating system a browser runs on has native dropdown lists, and they can look very differently on different systems. The idea is that the <select> element can use the native dropdown list style of the underlying operating system.
It's not that it's "hard" to do, it's that styling a dropdown list makes no sense given the presentation-neutral priorities the <select> element embodies. It is the lowest common denominator of what a dropdown list is across all systems, hence system-specific styling makes no sense.
I´ll just share here the answer I wrote yesterday after reading about selects. As it´s not the same question, I´ll not mark it as duplicated, but anyway is a little wide question to talk about.
About selects:
They are not usual DOM elements, and that makes them behave different from others. It seems the browser generates them outside the DOM model, and then the events like click, or keypress on options do not work.
Also attributes like size will change their behaviour (a size bigger than 1 will make it appear as a list, not a dropdown).
Check this answer:
Check if select is displaying options
As you can see, there is an example with Jquery, then you will be able to style it, or to play with it´s properties. Also there are some useful links and the explanation for them.
Hope this explanation could help to you.
Regards
I am using a WebView inside one of my programs and there is a <select> tag inside the HTML page I'm rendering. I would like to add icons to the <option> elements it contains, like this:
(The shadow effect is not there, so it can be easy to miss out that this is a dropdown list; but it is.)
Is that possible? All my efforts to style <option> tags or put images in them so far have failed.
Since it's not ever going to be displayed by another rendering engine, I only need it to work with the WebKit. I'm also fine with a solution that involves WebView trickery and that would never work in a browser, although it would be kinda neat if it did work in a browser too.
This is not possible in webkit browsers using just css at this point in time. It is possible in Firefox, but not webkit.
You will need to use javascript to replace the select box with stylable elements.
The following post answers this:
How to add a images in select list
On many websites, when typing in a username for example, a dropdown occurs where previous input shows up so the user can easily select something instead of typing. I know you can turn this off in browsers by having the form or input have an attribute of autocomplete="off". The problem is when I want it on, and the input has padding. The dropdown looks horribly off because it has no padding for each item.
Is there any way to style this with only css? I'm aware that you could potentially use a javascript/jQuery workaround to store previous entries in a cookie or something and make your own dropdown. But I don't want to rely on javascript for this.
Nope. Autocomplete is not a part of any standard, and is not part of the DOM. The only way to style is, as you've suggested yourself, by recreating that functionality using JavaScript.
Unfortunately there is no way to style the drop down box itself with CSS, because in this case (when not using javascript/jQuery/mootools/etc.) it is operating system dependent - i.e Windows/Linux/Mas OS visualize it according the visual user settings (i.e scheme).
I need to determine what font and size will be used for each HTML element. They may be set in various css, div, span, or on the element itself.
If I were to do this manually I would start by looking at the element and work backwards until I came to span, div, or css that had a font and/or size. That is the value I want. The browser can obviously do this because it displays the text using a font and size. I want to print a list with two columns, one with the text and the other with the font/size.
If you are looking for a non-programmatic way: I would suggest the firebug plugin for mozilla. Firebug will not only show you all attributes, but allow you to turn them on and off in the client.
You want to reproduce the functionality of parsing HTML into DOM objects, parsing CSS into rules over those objects, and applying those rules across the objects to end up with the associated computedStyle values? That sounds pretty much like a web browser to me.
You could try scripting Firefox or an IE WebBrowser control. There's also an open-source native Java browser/toolkit being developed, though I don't know how practical that is yet.
I want the font color to change in a textarea as I type in specific keywords, like in Visual Studio.
I have not seen this anywhere, so I don't know if this is possible with HTML and JavaScript.
Has anyone seen anything like this? Or know how to write it?
Textarea is a standard HTML element and so was invented just after the dawn of time. Unfortunately this means it is limited in it's appearance and functionality.
Changing the colours of specific words is not possible as far as I know. However a way to get around this would be to have an iFrame embedded in the page. That way, you can treat the iFrame content as another web page and style it using CSS.
The Yahoo RTE, the FCKEditor and the Lightweight RTE works in this way.
Another option, which does not use an iFrame is the editor used here on Stack Overflow, known as the WMD. The files are here.
It's not possible.
Way to go is to make textarea's font, but not cursor, transparent using color:#000;-webkit-text-fill-color:transparent, then create underlying, 100% overlapping div to which content of textarea will be copied + formatted on textarea's oninput event.
You'll need to adress (or avoid) some issues coming out of syncing these two elements, like scrolling for example, but it can be done. I made my own HTML editor this way.
AFAIK, css property -webkit-text-fil-color is supported in Opera, Chrome and should be in soon-to-be-released Firefox v.48.
You would probably have to run javascript on the client to detect when the text changes, then replace the text to be highlighted with some child html elements with the proper style.
For example
Original text:
This is what the user typed.
Highlighted text
This is what the <a class="className">user</a> typed.