After extensive testing, I believe it is not possible to change the color of the text in an option element of a select dropdown in Safari for Mac. (By that I mean have the text of some option elements one color, and others a different color). I've tried css, inline styles, JS, and (shock) a font tag.
It does work in Safari for PC however! Also chrome, IE and firefox on both platforms. It does work in safari mac if you use a "multiple" select, but not single line/traditional select box.
Can someone confirm?
(BTW, I don't really want to be told "you shouldn't do this" or "why ever would you want to do that", etc, just confirmation that it either is impossible, or an explanation of some way of doing it).
Thanks!
Related
I have an explicit problem with displaying my mega dropdown menu only in Safari browsers. This is the case for the most Apple devices. Only one test on the most modern Iphone worked a little well but still with bugs. The other devices didnt't open the dropdown on click, neither on big screen nor on small screen (I wrote it responsive). I already checked, if the installed Safari on the different devices is actuallized. This doesn't fix the problem. Also the -webkit properties doesn't fix it.
I used this multi-level dropdown menu by Victoria Kronsell:
https://medium.com/swlh/building-a-css-only-responsive-multi-level-mega-menu-ee0a3781cc3f
Just after writing my question I have found a solution and still posted the question, just in case some other people had the same problem. If not necessary I will just delete the question.
The code was provided by Victoria Kronsell, see her example on CodePen:
https://medium.com/swlh/building-a-css-only-responsive-multi-level-mega-menu-ee0a3781cc3f
She already stated that there will be problems with Safari, because "Safari, for example, does not apply a :focus state on click".
The solution is working with polyfill. I have edited my code with the following scripts and now the menu opens in safari browsers:
https://gist.github.com/NickGard/43328a4e223698e6a63cbff410e35342#file-safari-focus-polyfill-js
https://github.com/matteobad/focus-within-polyfill/blob/master/src/focus-within.js
https://github.com/WICG/focus-visible/blob/main/src/focus-visible.js
I have just started using the Firefox Developer Tools. When I am in the Style Editor, I can't seem to grab the scrollbar thumb to scroll through my style sheets. I assume I'm missing something but can't find what. I have restarted the developer tools, and restarted Firefox, but that didn't help.
My cursor stays as if it is selecting text, even when I hover over the tiny scrollbar thumb, thus it doesn't let me grab the it. Obviously this is important as style sheets can have many lines!
I am using Firefox 50.1.0 currently.
This is a known bug filed as bug 1265807 .
A workaround for this is to switch to the Firebug theme, which uses the OS default scrollbars:
I want to select only first two cells of an column, I am able to select in Firefox but Chrome and IE I am not able to select like that. What to do now?
It's not a CKEditor issue but browser-related problem and there's no workaround for that. This is because, due to the lack of standards and recommendations, different vendors implemented many contenteditable features in a totally different way. And this is one of them. There's nothing we can do about it until some standards emerge.
The Table Selection CKEditor 4 plugin allows to select multiple cells by clicking and dragging with the mouse cursor like you would in other content editors.
Tested with latest Firefox and Chrome.
Is there an easy way to use the built-in icons of the Firefox browser, such as the add, remove, or refresh icon, in a XUL firefox extension? I would like to use the icons in a toolbar to be consistent with the browser design.
I have been looking high and low for an answer, but the web is strangely devoid of this little piece of information. Therefore it must either be dead simple or not possible. I hope the former...
Thanks already for all your help :)
The resources, such as icons, are accessible from add-ons.
E.g. the browser reload icon is at chrome://browser/skin/reload-stop-go.png (you can open this in your Firefox). This particular icon would be used in conjunction with -moz-image-rect bases sprite-ing.
Icons are usually specified in the CSS rules for the browser (Firefox) or the global package (aka. toolkit). To find out where something is, I'd recommend the DOM Inspector add-on, inspecting the Chrome window itself and looking in particular at the CSS and/or computed styles view. Also, you may look directly in the source, e.g. on MXR.
Word of advice: Should you always double-check that browser/toolkit resources are actually available on all platforms and are accessed the same way, have the same URI, dimensions in case of icons, and so on. In particular with add-ons, quite often the platform themes will use platform icons (e.g. GTK stock icons on linux) or provide multiple alternatives (Win aero and regular icons, or regular and #2x hidpi ones).
how to edit Firefox 'basic page style'
for all sites
with a Stylish script
to set scrollbar to a higher contrast color.
I can't see the thing its terrible.
is there any other way to do this?
The scrollbar is an operating system feature, not a feature of your website. Its look-and-feel are controlled by the user, not the webpage. IE provides a way to change scrollbar colors but it was heavily abused in the early days and is now considered a generally bad idea. In short, if you are trying to manipulate scrollbars from a webpage you're going to have to code a 'fake' scrollbar in Javascript or forget about it.
If you are trying to change only your own system then you may find some possibilities in creating user chrome, greasemonkey script or persona. I'm not sure what is possible there.