iOS search button with a unique blue outline border

On iOS, I'm seeing a strange blue border that I can't seem to get rid of.

see image for reference

I've exhausted all options like :focus and :active, but I can't pinpoint the source of the border. I've searched through different inspect tools on various browsers but I can't replicate the issue. I'm at a loss.

Here is the code snippet:

<li class="menu--list__items zoeken nav-item">
            <a class="menu--list__items--link nav-link" href="#" id="zoekenDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Zoeken
                <i class="material-icons">
                    search
                </i>
            </a>
            <div class="dropdown-menu animate slideIn zoeken--dropdown" aria-labelledby="zoekenDropdown">
                <input class="form-control dropdown-item" id="zoeken-term" type="search" name="q"  placeholder="Waar bent u naar op zoek?" autocomplete="off" aria-label="Search">
                <button type="submit" class="zoeken--dropdown--btn">
                    <i class="material-icons">
                        search
                    </i>
                </button>
            </div>
        </li>

htmlcssiosbootstrap-4border

Answer №1

After trying various solutions, I found success with the following code snippet:

            &:focus {
                    outline: 0 !important;
                    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
                    -webkit-touch-callout: none;
                    -webkit-user-select: none;
                    -khtml-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none; 
                }

Answer №2

While it may not be the ultimate solution, have you considered using the !important declaration?

Combining it with :focus or :active may provide the necessary functionality. If the issue is specific to IOS, this resource could be beneficial: https://developer.mozilla.org/de/docs/Web/CSS/WebKit_Extensions

Answer №3

If you want to improve your code, consider using outline: none; as TYR outline: none; and avoid using :focus and :active in this scenario.

Make sure to take a look at this...

.btn{
  border: none;
  outline: none;
 }
<html>
<body>
<button class="btn">Submit</button>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I ensure that buttons in a row utilize the full 100% of available space?

I have a row of buttons in my HTML code like this: HTML : <div class="buttons"> <div><input type="button"/></div> <div><input type="button"/></div> <div><input type="button"/></div& ...

htmlcss

Is there a way to apply a css class to all nested elements in Angular 6 using Ngx Bootstrap?

I've defined a CSS class as follows: .panel-mobile-navs > ul > li { width:100% } Within the HTML, I am utilizing Ngx-bootstrap for a series of tabs like this: <tabset class="panel-mobile-navs" > ... </tabset> My intention is to ...

htmlcssangularangular6ngx-bootstrap

Modify the font style of numbers based on the keyboard language selected by the user

Is it possible to change the font family of numbers in input fields based on the user's keyboard language? For example, if the user is typing in Persian, the numbers should be displayed in a Persian font, and when they switch to an English keyboard, t ...

javascripthtmlcssreactjsnext.js

Ensure tables are vertically centered when printing an HTML page

I need to export two tables, each measuring 7cm×15cm, to a PDF file with A4 portrait paper size using the browser's "Save to PDF" option in the print tool. My goal is to center these two tables vertically on the A4 paper. If that proves difficult, I ...

htmlcssprinting

Override the default Bootstrap 5 styling for nav-links

I recently encountered a problem while trying to customize the appearance of the nav-link elements in my Bootstrap 5 navbar. I initially thought I could simply override the existing styles by targeting the class in my CSS. However, my attempts were unsucce ...

htmlcssstylingbootstrap-5

Switching the background color of a button on click and resetting the color of any previously clicked buttons (a total of 8

I'm struggling to implement a feature where only one button out of a column of 8 should be toggled yellow at a time, while the rest remain default green. Unfortunately, I can't seem to get the function to execute on click, as none of the colors a ...

javascriptcssnode.jsexpressnodemon

Is it advisable to combine/minimize JS/CSS that have already been minimized? If the answer is yes, what is

Our app currently relies on multiple JS library dependencies that have already been minified. We are considering consolidating them into a single file to streamline the downloading process for the browser. After exploring options like Google Closure Compi ...

javascriptcssminifygoogle-closure-compileryui-compressor

Shifting and implementing various styles across numerous elements at the same time

There is an anchor tag containing two spans... <a class="banner-logo" href="/search"><span id="banner-logo-hello">Hello</span><span id="banner-logo-world">World</span></a> When hovering over the anchor tag, I want to c ...

css

Is there a way to extract the "validade" value from the array and retrieve it exclusively?

The following array contains data: {"status":true,"data":[{"id":1,"pessoa_id":75505,"created_at":"2022-02- 01T17:42:46.000000Z","holder":"LEONARDO LIMA","validade&quo ...

javascripthtmlangular

What is the best way to implement an anchor link in my JavaScript code?

I'm struggling to wrap my head around this, as my thoughts seem to have vanished. On my webpage, there's a button element with an id: for example <button id="someId"></button> Within the document.ready function, I've set up an ...

javascriptjqueryhtmlanchorhref

Text alignment in the horizontal direction does not function as expected within the `<span>` element in Bootstrap 4

The code snippet below is what I am currently working with: <div class="card" > <div class="card-block"> <h4 class="card-title"> <span class="text-left"> ...

htmlcsstwitter-bootstrapbootstrap-4

Turn off images using Selenium Python

In order to speed up the process, I believe that disabling images, CSS, and JavaScript can help since Webdriver waits for the entire page to load before moving on. from selenium import webdriver from selenium.webdriver.firefox.firefox_profile import Firef ...

javascriptpythoncssseleniumselenium-webdriver

What are some ways to reduce the delay of Dark mode on a website?

Can anyone help me optimize the speed at which dark mode is applied on my website? Currently, there seems to be a delay between page load and the dark mode taking effect. Below is the jQuery.js code I am using: onload = function () { if (localStorage. ...

javascriptjqueryhtmlcss

Why isn't the main body of CSS extending across the entire page?

I feel like I'm running headfirst into a wall trying to figure out why the code I wrote for this specific website isn't quite working properly. The main content area of my pages (the white space in the link below) is supposed to extend from the ...

htmlcssspacing

Using PHP with Slim PHP Framework to dynamically include CSS files in the header of a document

I have developed a sleek application featuring a login form, dashboard, registration page, and account page. Each of these pages has its own unique route. To maintain consistency across all pages, I have included a shared header and footer by inserting < ...

phphtmlcssdynamicslim

How can I eliminate the gap above the footer in iframes alignment?

I have a setup with four iframes: header, menuframe, bodyframe, and footer. The menuframe and bodyframe are positioned next to each other with space between the footer and the menuframe/bodyframe. How can I remove this space? Here is the CSS: iframe{ ...

cssiframe

Utilizing NSURL to insert HTML credentials into the <input> tag

Trying to send a request from my iOS app to the Mistar website through NSURLSession. The goal is to load the website in the background, provide username and password strings into the input fields, and gain access to the logged-in page. This is the relevan ...

htmlioshttpnsurlnsurlsession

The module 'FloatingLabel' cannot be found in the 'react-bootstrap' library

Struggling to import the FloatingLabel component from react-bootstrap as outlined in the official bootstrap documentation. Despite following the instructions, I keep receiving an error message indicating that FloatingLabel is not exported from react-bootst ...

reactjsbootstrap-4

Creating stylish rounded corners for the table header with a specific background color using CSS

I am a beginner in HTML/CSS and I am trying to create a table with rounded top corners and a different background color for the header line. I have been able to achieve each individually with the help of online resources but I am struggling to combine the ...

htmlcss

Insert a new row into a table using tablesorter jQuery

Is it possible to add a row to a table built with the jQuery library "Tablesorter" by simply clicking on a button? I have tried this approach, but unfortunately, the new row does not inherit the CSS properties of Tablesorter. As a result, I am unable to se ...

jquerycssrowtablesorter