- This topic has 12 replies, 3 voices, and was last updated 1 year, 6 months ago by
Tom.
-
AuthorPosts
-
January 14, 2021 at 12:57 am #1618061
Ola
Hi!
I discovered that all input fields gets an extra border on mobile devices when active, with coloring defined by browser. After some testing, I’ve been able to remove the borders for all search boxes in Android and IOS except for the top menu navigation search on IOS. (Example: https://www.stag1.ikigai.se/valmaende/fem-rad-for-julefrid-i-pandemitider/). This is the code I’ve used:
.search-field:focus { outline:none; }
How can I remove the nav-search border on IOS?
Best regards,
/Ola
January 14, 2021 at 9:30 am #1618836Ying
StaffCustomer SupportHi Ola,
Give this CSS a try:
input:focus, select:focus, textarea:focus, button:focus{ outline: none; }
Let me know ๐
January 15, 2021 at 12:21 am #1619547Ola
Hi!
Thanks! Your code removes the border all instances on Android (tested on Samsung) and all instances on IOS – except top nav-search border.
How can we target the top nav-search border on IOS?
Best regards,
/Ola
January 15, 2021 at 9:08 am #1620321Ying
StaffCustomer SupportTry this:
.inside-navigation .nav-search-active .search-field { outline: none; }
January 15, 2021 at 12:57 pm #1620559Ola
No change I’m afraid, the outline is still there …
Any other suggestions?
/O
January 16, 2021 at 10:27 am #1621558Tom
Lead DeveloperLead DeveloperCan you show us a screenshot of the outline as you’re seeing it? The CSS is applying to the field, so it shouldn’t be there.
You could try this:
.inside-navigation .nav-search-active .search-field { outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
Just a heads up that if you’re removing the outline, you should make it obvious that the field is selected using other methods for accessibility reasons.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJanuary 18, 2021 at 12:09 am #1623076Ola
Hi!
Thanks for the suggestions!
Unfortunately it doesn’t have an effect in the nav-search for some reason. The previous fixes removed the outline in the (sidebar) search widget in IOS so it’s tricky to know what kind of voodoo that’s going on here … (See images).
(It’s not mission critical, but it would be nice to make it look good)
/O
January 18, 2021 at 12:11 am #1623080Ola
It seems that my image links disappeared?
https://drive.google.com/file/d/1iUqVQHdjCH9C7MEsUWbzZbnCvy2R6bTo/view?usp=sharing
https://drive.google.com/file/d/13bFEiwTOwHD5zGqI51sDRQuj9B63u_B2/view?usp=sharing
January 18, 2021 at 9:49 am #1623933Tom
Lead DeveloperLead DeveloperIs that Safari?
Could try removing shadows as well:
.inside-navigation .nav-search-active .search-field { outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: 0 0 0; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJanuary 18, 2021 at 10:48 am #1624036Ola
Hi!
No change sadly enough.
Yes, it’s safari, but it is visible on firefox on IOS as well. Firefox on Android has a thicker border, but in the theme active border colour. Search widget on IOS/Android is normal (thin border, active field border colour).
/O
January 18, 2021 at 1:09 pm #1624176Tom
Lead DeveloperLead DeveloperAnother quick thing to try:
.inside-navigation .nav-search-active .search-field { outline: none !important; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJanuary 19, 2021 at 12:14 am #1624530Ola
That’s it!
The extra border is gone, that was the tag that was missing!
For those that searches the forum, it seems that this piece of code removes all the extra borders, on any input field, on IOS/Android:
input:focus, select:focus, textarea:focus, button:focus{ outline: none !important; }
Thanks so much for a great product and your great support!
(It’s push to production as soon as I find a slider that’s as lightweight and responsive as GP and GB)/O
January 19, 2021 at 8:50 am #1625222Tom
Lead DeveloperLead DeveloperGlad we could help ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.