I am on Mac and noticed that the tick icon of a select option looks like this in Mozilla Firefox:
I'm intended to change the icon to look like in Safari and Google Chrome. Like this:
Anyone knows how to style the select or option element with CSS in order to achieve this?
These icons depend on the font that you use.
If you didn't select yours then the default is used.
Not every web browsers has the same configured and that becouse they are different.
Check this answer:
How to draw a checkmark / tick using CSS?
How to change this should be solved right there^.
Related
Safari seems to use a put a filter or shader on the favicon when displaying said icon in the tab bar.
Screenshot of the Tab
This is not how the Icon was designed and not expected.
Screenshot of the Bookmark Entry
This is how the Icon was designed and is excepted to look.
This is how it looks in the bookmark bar and in the address bar.
I've tried to delete the caches in the ~/Library/Safari/Favicon Cache/ because I guessed it might have been an artefact from he development. But it is not.
I've also had a good look at all the versions of the Icons that the build script generates. But all of then look as expected (in the sense of the color is always the same and does not differ).
The difference is really only in the tab bar. (For example the "Favourites" new Page in Safari also displays the icon in the expected way).
Safari: Version 14.0 (15610.1.28.1.9, 15610)
Maybe your site has a Pinned Tab icon. To check this, look for <link rel="mask-icon" ...> in your <head> section. If you have one and you don't like it, simply remove this line, and maybe the corresponding SVG image, too.
I've been working on a UI recently in AdobeXD and when I finished everything up and was ready to export to flutter, one annoying thing happened when I was testing. I had the unpleasant surprise to discover that my background color was missing! I figured out that I didn't select export color assets. Unfortunately, this did not solve my problem.
install advanced Export plugin
or use Share Tab in Adobe XD 2020
Using the Share tab in XD, select the "Development" view setting and provide (or open) the link in a browser. From there, you will be prompted to view in "Specs" mode (or click the small developer icon in the upper right of your browser) to view a panel with the colors.
As you hover over the tiles, you can click to copy the hex code.
(screen capture from colors in browser showing hover value
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.
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!