Safari AutoFill disable - html

I'm currently trying to disable the autofill feature in Safari through CSS, with SO help in previous questions it wasn't to hard to disable the icon, but the autofill recommendation box is still showing when I'm inserting an address:
So as you can see the highlight section is what I need to remove since it appears on top of my google autocomplete box. I've also tried changing the z-index of the pac-container to see if it could have a higher priority than Safari autofill but it didn't work either.

Related

Color picker box missing from Chrome inspector source page

Running Chrome Version 103.0.5060.114 and noticed today that the color picker box is missing entirely from the Chrome inspector source page. The color picker box is still visible on the elements page, however when I click on it it doesn't automatically select the eyedropper like it has in the past. Anyone else experiencing this issue or able to fix this?enter image description here
Yes! It is driving me mad how they keep messing stuff up.
The color picker bug in Sources panel is fixed in Chrome 104. It will land soon in end of July.
Another issue regarding eyedropper behaviour change is filed here: crbug.com/1345827. You can put in your comments in the bug on how it affects you and subscribe to the bug for progress.

Weird title on inputs / textareas all around the web

When I mouse over many inputs and textareas all over the web, I see some weird text.
I thought it was on StackExchange only, but it happens on amazon:
(note that you can't see my mouse in these pictures, it is not recorded in the screenshot, but it is on the upper-left of each hover text.
Chrome's DevTools shows a weird title attribute:
I have no idea why this happens. The websites I've seen this on don't seem to have a library in common, so I doubt that would cause the problem. At the same time, I have seen this in browsers other than chrome, so I don't know. Even the textarea that I'm typing in right now has the problem.
Why does this happen and how can I prevent it from happening to my website?
Looks like that's a built-in Chrome option, an "experimental feature." Go to chrome://flags/ and disable "Show Autofill predictions" if you want to turn it off (mine was disabled by default).

iOS Safari autofill sugestions overflap fixed position bottom element

I have a very inconsistent issue with iOS Safari on iOS 10.2/10.2.1 (at least). On many iPhone 7,6,4 it works without an issue but on at least 2 iPhone 7 I had this issue.
I have a position: fixed; bottom: 0; input element on my page. If the placeholder is e.g. Name, Safari will offer to autofill it with a contact name in the suggestion box above the keyboard.
The problem is that on some devices, this suggestion box of the keyboard will overlap the input element at the bottom of the page:
The suggestion bar was expanded when the keyboard opened and was not manipulated afterwards by collapsing/expanding it.
On many tested devices this does not happen, only on a few of them.
Only the suggestion bar seems to be the issue. The normal input switch bar does not exhibit the problem. When I change the placeholder to something else, Safari won't try to autofill it and everything seems fine:
(Except for the small white gap at the bottom but I could live with that)
Does someone know why this might be happening on some devices? And maybe even how I could go about fixing this?
(Side note regarding a possible workaround: As I said it seems like Safari parses the placeholder to decide when and what to offer as autofill. When I change it to something else it won't show up. Simply disabling it for that one field like that would be finde but the same thing happens on an "Email" field and there is no smart alternative word to use as a placeholder.)
For whatever it is worth, I just had this issue and resolved it by switching out the <input> element for a <textarea> element. Everything is working as expected -- I am not seeing the autofill suggestion anymore.

scrollbar disappeared when i add mouse to mac at first time

Scrollbar disappeared when I add mouse to mac at first time.
please look at this links.
demo link
When I add mouse to my mac, scroll bar disappeared and a white color box coming right top corner. I do not know why. firefox working fine. chrome safari, and opera i.e had this issue. After refresh the page i could see scrollbar. Help me if you know/face this issue before.
screenshots here... who does not able to understand my issue.
screen shot one after i insert mouse to mac machine scroll disappeared and getting square box right top corner:
after I refresh the page i get see scrollbar.
You can change the setting in the preferences. By default, the scroll bar is hidden with mac products.
Odds are if a user is using a Mac, they're already aware of this and it's considered a feature to them.
But, if you really need it, try using the webkit css pseudo selector ::-webkit-scrollbar
This will only work in Safari and Chrome.

Internet Explorer 7 textarea field and dropdown fields

We have a client who is using IE7 and for some reason drop-down boxes and text-area area fields are not displaying correctly. The arrow for the drop-down box does not appear and the right border of the text-area box does not display.
Works in IE 8/9, Chrome, FF. See image attached
Does anyone know what is causing this and how I can fix?
This is a html/php app
You didn't include the markup so we can only guess. There is no way to know for sure. I would inspect the textboxes in Firebug or something similar and see if they're inheriting styles that you aren't aware of.