Mobile Safari uses a UIPickerView for <select> elements - I'd like to change the background color of it with CSS. As you can see in the screen shot below, it's very hard to read. What you are looking at is the State <select> form element. Changing the text color or background color of the <select> element itself doesn't fix the problem.
I thought it was related to a parent element's or its own background color - but I went up the line and changed every ancestor element's background color to white and the problem persisted. Is there a prefixed style or trick to making this GUI legible? Or maybe it's just a bug.
EDIT: The gray behind the UIPickerView is filled in by mobile Safari, since the select is almost at the bottom of the page. Mobile Safari vertically centers the select above the UIPickerView and fills in the extra space below the page with the gray. The question is, how does it determine to use that dark gray? I've tried changing the body text color, and background-color of every other element on the page to no avail.
Unfortunately, there isn't a way to do it. iOS Safari takes full control of styling select lists' internal contents. Here's a reference for verification: little link.
One way to achieve this this would be to simulate the dropdown/select menu using JavaScript.
It's not very preferable, but if you absolutely require to change the default styling, then I'm afraid it's the only way to go; here's a demo that should give you an idea on how to do the simulation: another little link.
Related
Have a funny issue going on and no idea where to start. I have an iOS app that's built with Nativescript & Vue and while in dark mode the button colors in dialogs are off. Sometimes they are a bright blue (which is normal and what I want), but most of the time they are a darker color blue which are really hard to see. Randomly the correct color will show, but mostly the incorrect darker and I can't seem to pattern it out - just random.
The dialog is a confirm dialog that is being called in the typical Nativescript Vue manner - nothing custom being called.
Any direction or idea why this may be happening is greatly appreciated.
Incorrect button color
Correct button color
Note: Dialog message is purposely blacked out
Try writing Button styles at the end of your application level style sheet.
Button {
color: blue; // any color your like
}
Unfortunately you can not have separate styles for light / dark mode yet. There is an open issue you might want to follow.
Try to use custom model component for alert dialog or https://market.nativescript.org/plugins/nativescript-fancyalert alert dialog.
So, basically, I can change the background color of a tag on my computer but when I open the website through and iPhone (doesn't matter if I'm using Safari or Chrome) the background color is that default gradient gray.
I also tried to do it through the javascript, didn't work.
NOTE: i am NOT talking about the menu, only about the box we see without the options below, the one that if we click it shows the menu.
I had that issue before.
Does the background have a opacity?
for example:
background-color:rgba(128, 128, 128, 0.543):
If that is the case remove the opacity. In this case it would be the 0.543
I'm having an issue with a responsive dropdown menu, based on wordpress Underscores theme.
It looks okay on desktop but not on iOS Safari including iPad and iPhone.
I've tried to add z-index to other divs as well but it doesn't work. Please help me.
Thanks.
There is actually a fourth method, with translate3d:
-webkit-transform: translate3d(0,0,1px);
transform: translate3d(0,0,1px);
iOS browsers fully support CSS3, so you can use this safely.
There are 3 ways you can handle this:
1. You can set the z-index value to a large number like 80 or 90.
2. You can add the menu element after the other divs (so by default it will place on other items)
3. You can set the z-index of the text in the divs to be less than that of the menu div.
You cannot just apply a z-index to your dropdown menu - what you need to do is apply z-indicies to sibling elements to ensure the correct stacking order.
Without seeing your HTML, it's not possible to determine where they should go. But the best I can say is apply a z-index to your entire nav bar and one to your entire content div. Keep in mind that, as Ajay said, in order for z-indicies to work correctly the elements they are applied to have to be positioned non-statically (in your case position: relative would most likely be the best option).
If dropdown menu's parent element is nav, you should put z-index a large number to it, higher than other element
I'm aware of how to make invisible elements keyboard focusable and read by screenreaders, however for the purpose of a student-led survey - I would like certain elements to be invisible to screenreaders / keyboard focus to be less distracting, but have them visible for tutors to use using a mouse.
I've tried using iframes, however the keyboard can still 'tab' into them. I was considering a pop-up window that can control the parent window? - but might have some issues with blockers etc.
Many thanks! Mike
One of the simplest ways to get content ignored by a screen reader is to place it into an image and then set the alt text on the image to be "" in your HTML. This will cause the screen reader to skip this content since it can't interpret it. This will also eliminate any tabbing or keyboard focus since the web browser will treat it like any other image in your page.
Another way to do this, and a bit more complicated, is to detect if your page is being pulled into a screen reading browser and set the CSS properties of the content you don't want read by the reader to be have the following:
visibility: hidden; display:none;
Screen readers will ignore anything that is invisible and/or not displaying, thus it will not be read to the user. This is also a bit cleaner since you're not destroying the SEO ranking of the page but are just modifying the content displayed to users who don't need to see/hear it.
a good way to prevent screen readers from viewing an element is to apply the aria-hidden="true" attribute; this is fairly well supported by browsers, and will prompt JAWS and other screen readers to skip the content. You can also use role="presentation" - there's a good article on this here: http://john.foliot.ca/aria-hidden/
Applying tabindex=-1 will only only allow the element to be focused on by scripts and not keyboard input, so this will work too. Additionally, although I don't recommend it, I found while tearing my hair out over someone else's script, that if you don't have an 'href' attribute defined for a link element, (making it invalid) this also prevents focus.
I've got a site that's using sIFR, and some of the replaced text is being stretched vertically in IE9. It's only happening in places where the text wraps 2 lines, and it fixes itself when I hover my cursor over it. The sIFR text is a link, but I'm not sure if that has any correlation.
I've tried various settings changes like fitExactly, forceClear, and forceSingleLine (though I want it to be able to wrap), and those didn't work. I've tried changing the font-size, line-height, and all other dimensions to px instead of em. innerHTML isn't being used anywhere on the page. It's frustrating that it works after being hovered on, but not before.
And I know you're probably thinking "use cufon or #font-face, dummy" but I'm stuck with sIFR for now. The client wants what the client wants...
I've found a solution,
if you try to hover with mouse cursor the text will display correct so..
I write few line of code to put in sifr-config.js
forcing flash reset "onReplacemment" callback only when IE9 is detected
you must use Jquery for browser detection or use another javascript way
see the link below:
http://www.voo-doo.net/robotphobia/2011/05/fix-sifr-ie9