I recently updated to iphone 15.1. I opened the Safari browser and looked at my website. The 'send' button on all my forms has turned blue. It wasn't that way before. What's going on? How can I change this?
You may take a look at what color does the button use with the safari's Developer Tools, and by connecting your iPhone.
As you did not provide your code, I guess your button may be using the color inherited from html or body. You may try to explicitly specify the color on the button. For example:
.your-button-classname {
color: #your_color;
}
Related
I have a website with css styling. When I view in certain browsers when dark mode is enabled the css is absolutely destroyed and the colours which have changed in my site look absolutely hideous. How can I prevent my css/colourschemes being changed because of dark mode?
When I opened my url via a link sent on whatsapp on my android device the default browser - Android's 'internet' application automatically restyles the CSS because I have dark mode active. If other users go to my page and have dark mode active I would prefer them to see the original styling not the dark mode edited version.
I found out that you can use this media query to set css for dark mode: #media (prefers-color-scheme: dark) {. I could duplicate my whole css file which is currently 3000 lines long with dark and light with the same code between the parentheses but this seems nonsensical. Is there any other methods which would work?
As it turns out, Samsung Internet — the default web browser for a very large number of devices and the one featured in your screenshot — silently applies a filter that transforms colors on websites in a non-trivial way when the user enables dark mode on their device. See this blog post for more information.
The gist of it is that, as of Samsung Internet version 13.0.1.64, this filter is undetectable with javascript or CSS.
The only thing you can do as a web developer is to warn users and urge them to switch to a better browser:
<script>
if (navigator.userAgent.match(/samsung/i)) {
alert("Your browser (Samsung Internet) may not show this website" +
"correctly. Please consider using a standards-compliant" +
"browser instead. \n\n" +
"We recommend Firefox, Microsoft Edge, or Google Chrome.");
}
</script>
Had the same issue. Here's what I found.
I added this meta tag to the header tag:
<meta name="color-scheme" content="light only">
The meta tag above indicates that the color scheme is only supported by light mode.
Another option is the scheme preferred in light mode, but it supports dark mode as well:
<meta name="color-scheme" content="light dark">
Tested on Safari, Chrome, Samsung, Facebook in-app browser and Firefox.
Another method is to use CSS:
:root {
color-scheme: light only;
}
The above indicates that the styling only uses the light version only.
If I understood, you want users to see the so-called light version even if their browser is set to prefer the dark one. What I’m going to suggest is far from being perfect… I mean, I wouldn’t do so, but I think it should work. Simply copy and paste the CSS you wrote under a #media (prefers-color-scheme: dark) query and manually change what doesn’t work there, without changing the code outside its brackets. Users should see the original, light version of your website no matter what they selected in their browser setting. TBH, I don’t know why you want to do this: the ideal approach IMHO would be to provide both a light and a dark theme with a default fallback.
I did some testing and the solution I found is using the !important declaration after the property value that you want to have when browser darkmode is on.
Think about this though, if you are using browser darkmode and go on a website and it stays the same as the lightmode, how would you feel? Personally I get really pissed and leave immediately from a website like that. So I would actually recommend not changing the colors. Users want darkmode for a reason, probably because they don't want bright colourful things hurting their eyes. If they want to use browser darkmode, they understand what will happen to the colors of websites.
The only use case I can see for changing things would be if elements disappear because of darkmode.
That being said, if your elements are disappearing because of this darkmode, look into the root cause first. Understand why they are changing before slapping !important on everything. That is lazy and does not look good on you as a developer.
Before You do all that, please check if you did not do the mistake, that I did -
We're talking here about forced dark theme on mobile, that You think your browser, most probably Chrome, is forcing on every website making it's background black and text white.
What I had was a manually set chrome flag for forcing dark mode.
Go to Chrome and type address chrome://flags then search for "dark"
You'll find "Force Dark Mode for Web Contents" flag. If it's not already - set if to "default".
Hope it saves some time anybody, I've wasted 1h over this.
You will face this issue in Samsung internet browser only. if the user has enabled dark mode In "Samsung internet browser(mobile)", the browser automatically changes the css of website to suit to dark mode. no matter if you applied the same css you applied for light mode/default within #media (prefers-color-scheme: dark){}
So if you want to make your website look better in Samsung internet browser, you can detect the samsung browser using this javascript line navigator.userAgent.match(/samsung/i) and apply separate CSS class for Samsung browser.
In Firefox 67, one can use media queries to detect user preference on light or dark theme.
In my version of Firefox (under Ubuntu), it seems that my preference is light theme. That is, the following CSS gives a blue background:
#media (prefers-color-scheme: light) {
:root {}
body {
background-color: blue;
}
}
How can I change my Firefox preferences so that prefers-color-scheme: dark
evaluates to true?
I found an add-on that seems to do the trick, but I must be doing something wrong with my own CSS, as it does not work on my page.
Dark Website forcer
Good news -- from Firefox 87 this is now enabled by default, without the need to set a configuration flag! You can find it in the inspector tab:
Choosing the sun button simulates light mode;
Choosing the moon button simulates dark mode;
With no button selected, your operating system default will be used, as per normal.
In some older versions of Firefox, this feature existed behind a flag. To test on one of those versions, you can thus enable this by going to about:config, and setting the devtools.inspector.color-scheme-simulation.enabled property to true. Once that's done, you'll find the controls for it in the same place as in the modern devtools, but as a single paintbrush icon rather than today's sun/moon toggle buttons.
You can update the style used by Firefox by going to about:config and adding a new property ui.systemUsesDarkTheme of integer type with value 1.
It doesn't automatically update the value on active pages in the same way that it does when you're updating OS settings in Windows or Mac, but if you refresh the page after updating it will pick up.
You can confirm the browser setting is correct by viewing the example on mdn
Edit:
On firefox 71 the update is applied to active pages without refresh
Just for the sake of completeness: If everything fails, there is a Firefox add-on called “Dark Website Forcer” (also on GitHub).
It changes the style by reading the CSS of the website and re-applying the parts for the dark version again, if you want to have a dark one. As such, it also can only force a dark website, not the light one. The Readme has a detailed explanation why.
Disclosure: I'm the author of this add-on. 🙂
Can anyone have idea about how to work pointer-events: none in ios operating system.
Using this i need to disable input box in ios devices.
please guide me if you have any idea about this.
thanks.
If you're asking about within a web view, pointer-events:none is currently supported in all major browsers except Opera Mini, so should work fine on iOS. (But if the goal is to "disable an input field" you should probably do that by setting its disabled attribute instead of by blocking pointer-events.)
If you're asking about native code, CSS rules aren't relevant.
I have simple xpage with dynamic views. I can switch between them via Navigator that I added from Extension Library. Everything works OK, but the problem is with the CSS. To the navigator I have 1 style sheet attached, which contains the following:
.lotusSelected{background-color:none;}
And this is where it gets interesting- whenever I open the xpage in Chrome web browser, try to open any of the navigator elements and look at the code via Chrome devkit (or whatever it is when you press F12) it shows that the code above now is:
.lotusSelected{background-color:red;}
...So it pretty much changes my CSS. I don't understand why this is happening. Also, it does not happen in Internet Explorer. Can anyone explain me why this occurs and how do I fix it?
Maybe your css style is being overwritten by another one (i.e. from OneUI)
Check if it appears with strikethrough style below in your css debugger.
In that case, you can add !important in your style:
.lotusSelected{background-color:none !important;}
(FYI: this is a css anti-pattern :P )
If you want the background-color to be nothing then use transparent instead of none.
Recently published project in beta stage. Was testing it with new browsers for a while.
I fixed all bugs including background-size, some main css3 properties on IE8.
The only issue on IE8 is following:
To quickly recreate the situation please enter to the website http://goo.gl/rlmelu and click on, for example, birthday. Then enter number of participiants, for example 30 and select some date. Then click "next".
That's how Firefox 26.0, Chrome shows result:
http://joxi.ru/3w7gUv3JTJDfEIXmJqM
And thats how IE8:
http://joxi.ru/Eg_gUv3JTJB-EJupfnA
Please don't tell me to not to use IE8.
What am I doing wrong? How to fix it?
First Problem : The Choose Button
The Problem is CSS PIE. Two possibilities:
Disable PIE
In iefixes.css, disable PIE for .btn
Set to important
Set the Background to important (But think about: Is !important bad for performance?):
.btn-warning{
background-color: #f0ad4e !important;
}