Archived topic
Top menu search IOS form outline
12 replies · Started by Ola on January 14, 2021
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
Hi Ola,
Give this CSS a try:
input:focus, select:focus, textarea:focus, button:focus{
outline: none;
}Let me know :)
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
Try this:
.inside-navigation .nav-search-active .search-field {
outline: none;
}No change I'm afraid, the outline is still there ...
Any other suggestions?
/O
Can 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.
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
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
Is 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;
}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
Another quick thing to try:
.inside-navigation .nav-search-active .search-field {
outline: none !important;
}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
Glad we could help :)
