Getting rid of a blue border from a button upon clicking

Here is the problematic section of code

:root {
  --color-foreground-text-main: rgb(255, 72, 142);
  --color-foreground-text-sub: rgb(0, 114, 153);
}

html,
body {
  height: 100%;
}

img {
  max-width: 100%;
}

#cover {
  background: #222 url('Resources/img/cover.jpg') center center no-repeat;
  background-size: cover;
  color: var(--color-foreground-text-main);
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
}

#cover-caption {
  width: 100%;
}

#subscribe-button {
  text-align: center;
  background: var(--color-foreground-text-main);
  color: white;
  outline: 0;
}

#subscribe-button:hover {
  background: var(--color-foreground-text-sub);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <!--Mandatory meta tags-->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--Bootstrap CSS-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  <!--Custom Styles-->
  <link rel="stylesheet" href="SP_BaseStyle.css" />
  <title>School Project</title>
</head>

<body>
  <section id="cover">
    <div id="cover-caption">
      <div class="container">
        <div class="col-12">
          <br>
          <div class="row">
            <div class="p-0 pr-1 pb-1 m-0 
                        col-12 col-sm-6 col-md-5">
              <label class="sr-only">Name</label>
              <input type="text" class="form-control form-control-lg" placeholder="George Smith">
            </div>
            <div class="p-0 m-0 pr-1 pb-1 
                        col-12 col-sm-6 col-md-5">
              <label class="sr-only">Email</label>
              <input type="text" class="form-control form-control-lg" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e797b716c797b306d73776a765e7b737f7772307d7173">[email protected]</a>">
            </div>
            <button type="submit" class="btn btn-lg mb-1
                        col-12 col-md-2" id="subscribe-button">Subscribe!</button>
          </div>
          <a href="#nav-main" class="btn btn-secondary btn-lg" role="button">&darr;</a>
        </div>
      </div>
    </div>
  </section>

  <!-- jQuery library -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

  <!-- Popper -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

  <!-- Latest compiled and minified Bootstrap JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

  <!-- Initialize Bootstrap functionality -->
  <script>
    // Initialize tooltip component
    $(function() {
      $('[data-toggle="tooltip"]').tooltip()
    })

    // Initialize popover component
    $(function() {
      $('[data-toggle="popover"]').popover()
    })
  </script>
</body>

</html>

Upon clicking the button, a sudden dark blue outline appears around it. Despite searching through forums and Bootstrap documentation, I have not found a solution to change or remove the color of this outline.

I have attempted to modify the outline and box shadow properties with no success.

Please note that I understand the importance of visual cues and would prefer to simply change the color of the outline. However, if there is no alternative, I am open to removing it internally and adding a custom style in CSS.

EDIT: Just to clarify, the issue pertains to the 'subscribe' button, not the arrow button. I will include the code with the proposed changes and eliminate the border for better visibility.

Answer №1

I initially assumed it was related to the outline property, but upon further review, I realized that the issue lies within this specific line of code:

border: 2px var(--color-foreground-text-sub) solid;

The solution is to simply remove this line from your code.

Edit: Additionally, after clicking, make sure to override the following:

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: none!important;
}

:root {
  --color-foreground-text-main: rgb(255, 72, 142);
  --color-foreground-text-sub: rgb(0, 114, 153);
}

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: none!important;
}

html,
body {
  height: 100%;
}

img {
  max-width: 100%;
}

#cover {
  background: #222 url('Resources/img/cover.jpg') center center no-repeat;
  background-size: cover;
  color: var(--color-foreground-text-main);
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
}

#cover-caption {
  width: 100%;
}

#subscribe-button {
  text-align: center;
  background: var(--color-foreground-text-main);
  color: white;
  outline: 0;
}

#subscribe-button:hover {
  background: var(--color-foreground-text-sub);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <!--Mandatory meta tags-->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--Bootstrap CSS-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  <!--Custom Styles-->
  <link rel="stylesheet" href="SP_BaseStyle.css" />
  <title>School Project</title>
</head>

<body>
  <section id="cover">
    <div id="cover-caption">
      <div class="container">
        <div class="col-12">
          <br>
          <div class="row">
            <div class="p-0 pr-1 pb-1 m-0 
                        col-12 col-sm-6 col-md-5">
              <label class="sr-only">Name</label>
              <input type="text" class="form-control form-control-lg" placeholder="George Smith">
            </div>
            <div class="p-0 m-0 pr-1 pb-1 
                        col-12 col-sm-6 col-md-5">
              <label class="sr-only">Email</label>
              <input type="text" class="form-control form-control-lg" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e292b213c292b603d23273a260e2b232f2722602d2123">[email protected]</a>">
            </div>
            <button type="submit" class="btn btn-lg mb-1
                        col-12 col-md-2" id="subscribe-button">Subscribe!</button>
          </div>
          <a href="#nav-main" class="btn btn-secondary btn-lg" role="button">&darr;</a>
        </div>
      </div>
    </div>
  </section>

  <!-- jQuery library -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

  <!-- Popper -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

  <!-- Latest compiled and minified Bootstrap JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

  <!-- Initialize Bootstrap functionality -->
  <script>
    // Initialize tooltip component
    $(function() {
      $('[data-toggle="tooltip"]').tooltip()
    })

    // Initialize popover component
    $(function() {
      $('[data-toggle="popover"]').popover()
    })
  </script>
</body>

</html>

Answer №2

You can easily implement this in your css file:

button:focus {outline:none;}

Answer №3

The "outline" property is typically found in pseudo classes. To prevent its appearance, you can utilize outline:none or outline:0

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

What is the method for displaying the word '<head>' within a <p> element in HTML code?

My HTML page contains a simple <p> tag. Within this tag, I am attempting to display some text in the following manner: Insert this code snippet into the website header, between <head> and </head>, to activate the functionality notice. ...

Firefox users may notice that the pop-up video player appears in unusual locations on their screen

I'm encountering an issue with a pop-up video player that is triggered by an "onClick" event in HTML elements. The problem arises when there are multiple video players on the same page - in Firefox, the first video loads at the bottom of the page, req ...

Is it necessary to mark all checkboxes in the initial column of the gridview?

I have encountered an issue with my code that checks all checkboxes in the first column of a gridview. It seems to work only for Internet Explorer versions 5.0 to 8.0, but gives a Javascript error when running on IE 9 and above stating "Function Expected ...

Troubleshooting Unresponsive Dropdown Menu Using JQuery

My attempt to integrate the Dropdown Menu feature into my Navbar using base.html and navbar.html files has hit a snag. Although the menu is visible, it remains non-responsive upon clicking. Despite my efforts to rectify the issue by referencing other resou ...

Troubleshooting a problem with a CSS dropdown menu

For the past couple of hours, I've been trying to troubleshoot the issue with the fly-out menu on the homepage of this website. When hovering over the capabilities link, the fly-out works correctly but the main background doesn't stretch to fit ...

Error in Angular 2 component when loading background images using relative URLs from an external CSS skin

In my angular2 component, I am utilizing a third-party JavaScript library. The skin CSS of the component attempts to load images using relative URL paths. Since I am following a component-based architecture, I prefer to have all component dependencies enca ...

Sending property via div

In my ReactJS project, I am working on creating a dynamic div board. To properly position the elements on the board, I need to pass props such as row and column IDs. componentDidMount() { let board = []; for(let i = 0; i < 30; i++){ for(let j = ...

Creating a Unique Carousel Design with Ant Design

https://i.sstatic.net/HobMm.jpg Steps to personalize the ant design carousel with these unique features: Use Bullets instead of Boxes Modify Bullet Color Place Bullets outside the image container Sandbox Link https://codesandbox.io/s/trusting-dream-zzjr ...

Retrieve the URL from an iframe using Python and Selenium

On my website's main page, there is an iframe containing the text Code: LWBAD that I need to retrieve. For a clearer visual, refer to the image below: https://i.sstatic.net/DJgbd.png Below is the source code of my main HTML page which includes the ...

Thumbnail with magnifying effect on image

I have a thumbnail that contains both an image and some text. When I hover over the image, it zooms in. Check out this demo here: https://jsfiddle.net/ShiroiOkami/r1awd3b4/ I am looking to achieve an effect where the image zooms in without changing i ...

CSS only rendering in Firefox, not displaying in other browsers

After all the hard work I put into my website, I have encountered an issue while conducting browser compatibility checks. There seems to be something strange happening with the CSS of a specific link. I have applied a CSS class and included some PHP code ...

Stable height with Internet Explorer 6

According to information found on davidwalsh, it is mentioned that in IE6, the container will continue to expand vertically even when a specific height is set. How can I establish a max-height in IE6 so that the container expands with its content until r ...

Setting a customized background color for a designated section of a component

I am trying to create a hover effect at the position of a cursor, similar to what is shown in this example: For reference, I have also created a code snippet: https://jsfiddle.net/onnmwyhd/ Below is the code I am using: HTML <div id="container&q ...

Modify the color of an Ionic button for a single button, rather than changing the color for all buttons

How can I modify this code so that only the clicked button changes its color, not all of them? Here is the current code: .html: <ion-col size="6" *ngFor="let data of dataArray" > <ion-card> <ion-card-header> ...

Modifying the color of Bootstrap icons

When I use PHP code to print this icon into a table, it looks like this: echo '<button Onclick="" style="border: none; background: none; color:green"><a title="Reenviar" data-toggle="tooltip"><i class="material-icons">&#xE0BE;&l ...

Using the ng-app directive value with HTML and CSS can sometimes cause issues and the styles may not apply

angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=mainapp&p1=Error%3A…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A19%3A463) <body ng-app=""> It was working fine unt ...

Troubleshooting the unresponsive Vue @change event within the <b-form-datepicker/> component

I am in the process of developing a website with both a select form and a datepicker form that will send an API request for data. I aim to have the data update dynamically whenever there is a change in either of these forms, thereby eliminating the need fo ...

Modify the location of the input using jQuery

Hey there, I've got this snippet of HTML code: <div class='moves'> <div class='element'><input type='text' value='55' /></div> <input class='top' type='text&apo ...

Pressing the enter key will submit the form

After receiving feedback from users in my live chat room, one common request was to add a feature that allows them to send a message by pressing the enter button, instead of creating a new line in the text box. Despite attempting to implement some jQuery ...

What is the best way to prevent input fields from wrapping onto a new line in a Bootstrap 4 inline form layout?

I am facing an issue with my inline form where the input fields are wider than the screen, causing some of them to fall onto a new line. <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="u ...