[Resolved] Top menu search IOS form outline

Home Forums Support [Resolved] Top menu search IOS form outline

Home Forums Support Top menu search IOS form outline

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #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

    #1618836
    Ying
    Staff
    Customer Support

    Hi Ola,

    Give this CSS a try:

    input:focus, select:focus, textarea:focus, button:focus{
        outline: none;
    }

    Let me know ๐Ÿ™‚

    #1619547
    Ola

    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

    #1620321
    Ying
    Staff
    Customer Support

    Try this:

    .inside-navigation .nav-search-active .search-field {
        outline: none;
    }
    #1620559
    Ola

    No change I’m afraid, the outline is still there …

    Any other suggestions?

    /O

    #1621558
    Tom
    Lead Developer
    Lead Developer

    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.

    #1623076
    Ola

    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).

    Sidebarsearch-IOS

    Navsearch-IOS

    (It’s not mission critical, but it would be nice to make it look good)

    /O

    #1623080
    Ola
    #1623933
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #1624036
    Ola

    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

    #1624176
    Tom
    Lead Developer
    Lead Developer

    Another quick thing to try:

    .inside-navigation .nav-search-active .search-field {
        outline: none !important;
    }
    #1624530
    Ola

    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

    #1625222
    Tom
    Lead Developer
    Lead Developer
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.