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
Related
I think this is a bug with Mozilla (Firefox) up through the present 17.0.1. Hopefully folks have work arounds.
See the example http://jsfiddle.net/dd3pQ/
The CSS3 property scale3d scales the elements in a page, but ignores the OPTION elements of the SELECT drop down list. As you can see, they are rendered to the left of where they should be, in the page they would have originally been if not scaled.
We need to use scale3d in our app, but we also need drop down lists. Is this possible with Mozilla right now?
The dropdown is rendered by the operating system, and the OS doesn't give browsers hooks to style it.
Because form elements are limited by the OS capabilities, CSS doesn't require browsers to style them at all (they are "replaced elements" in CSS terminology, like contents of <img>). So, technically, that's not a bug.
I have built a custom context menu but have found annoyingly that when I right click on my site in firefox text and images just seem to randomly get selected.
The link below is a basic html dump of the page that is having issues. You can see that when you right click it in Firefox, certain elements are highlighted. Very annoying! This must be a purely html markup problem in Firefox as there is absolutely no CSS or JS on this page.
Example Here:
http://pastehtml.com/view/1e16jup.html
Love to hear your thoughts/suggestions...
There are a lot of errors in this page have a look at the validator result here.
Maybe it gives firefox a lot of problem rendering the page properly.
Close all the <meta> and <img> tags, <script> must have proper type attributes, tags like <h1> shouldn't be placed inside of <a>, <p> neither.
I'm assuming you mean the HTML5 contextMenu? Because this is not implented in any browser.
A bit of quick investigation seems to demonstrate that the header+footer elements have this behaviour. Also, lists appear to have it as well. This is because those elements have a certain semantic use and this behaviour seems consistent with those semantic uses. Check out the specification to see how these elements are intended to be used.
I'm firing blind but I'd suspect you can override this with -moz-user-select - but this is going contrary to the Firefox user experience. I wouldn't recommend it at all.
i am working on a project using html5 properties like <header>,<article> etc... it's work fine.
but when i review it & saw that i wrote <heder></heder> instead of <header></header> but the structure work well in all browsers.
so can anyone explain it.
Browsers don't do anything special with elements they don't recognise.
If the page didn't depend on any particular rendering of that element then replacing it with a different one (that had no default styles applied to it) wouldn't make a difference to the visual rendering.
As you know, for IE7+, label supresses the inner text of the option tag. Even using emulate meta tags in IE8 doesn't work. Is there a workaround that forces IE7+ to show the inner text, instead?
<option label="myLabel">myInnerText</option>
I have about a thousand screens having this kind of usage spread over the system, and I can't find a way to refactor it with just a replace (due to poor quality code).
Regards.
You can use jQuery to do it,
$("option").attr("label", "");
but this raises the question: Why are you using an attribute that is specific to IE, only to want to remove it if the user is viewing your page in IE?
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.