Deactivate the highlighting on the currently selected button

I have designed a set of tab-styled buttons for an options menu, and everything is looking great and functioning properly. However, I am facing an issue with the blue highlight that appears on the active button. Is there a way to remove this highlight?

https://i.sstatic.net/Ad9TC.png

Interestingly, my code snippet does not showcase the problem.

function ShowCurrent()
{
document.getElementById('btnCurrent').className = "menu";
document.getElementById('btnFuture').className = "menu off";
}

function ShowFuture()
{
document.getElementById('btnFuture').className = "menu";
document.getElementById('btnCurrent').className = "menu off";
}
.menu
{
border: 2px solid grey;
border-bottom: none;
margin-bottom: -2px;
margin-right: 5px;
padding: 3px 2px;
position: relative;
z-index: 5;
}

.off
{
border-bottom: 2px solid grey;
padding: 2px;
}

.placeholder
{
    border: 2px solid grey;
}
<div>
<button id="btnCurrent" class="menu" onClick="ShowCurrent();">Current</button>
<button id="btnFuture" class="menu off" onClick="ShowFuture();">Future</button>
</div>

<div class="placeholder">Just hanging out, taking up space</div>

htmlcss

Answer №1

To remove the outline, simply add outline:0

function ShowCurrent() {
  document.getElementById('btnCurrent').className = "menu";
  document.getElementById('btnFuture').className = "menu off";
}

function ShowFuture() {
  document.getElementById('btnFuture').className = "menu";
  document.getElementById('btnCurrent').className = "menu off";
}
button.menu {
  border: 2px solid grey;
  border-bottom: none;
  margin-bottom: -2px;
  margin-right: 5px;
  padding: 3px 2px;
  position: relative;
  z-index: 5;
  outline: 0;
}
button.off {
  border-bottom: 2px solid grey;
  padding: 2px;
}
.placeholder {
  border: 2px solid grey;
}
<div>
  <button id="btnCurrent" class="menu" onClick="ShowCurrent();">Current</button>
  <button id="btnFuture" class="menu off" onClick="ShowFuture();">Future</button>
</div>

<div class="placeholder">Just hanging out, taking up space</div>

Answer №2

Include the following code in your CSS to remove outlines:

outline:0;

Then, add the functions below to your Javascript:

function ShowCurrent()
{
document.getElementById('btnCurrent').className = "menu";
document.getElementById('btnFuture').className = "menu off";
}

function ShowFuture()
{
document.getElementById('btnFuture').className = "menu";
document.getElementById('btnCurrent').className = "menu off";
}
.menu
{
border: 2px solid grey;
border-bottom: none;
margin-bottom: -2px;
margin-right: 5px;
padding: 3px 2px;
position: relative;
z-index: 5;
outline:0;
}

.off
{
border-bottom: 2px solid grey;
padding: 2px;
}

.placeholder
{
border: 2px solid grey;
}
<div>
<button id="btnCurrent" class="menu" onClick="ShowCurrent();">Current</button>
<button id="btnFuture" class="menu off" onClick="ShowFuture();">Future</button>
</div>

<div class="placeholder">Just hanging out, taking up space</div>

Answer №3

Thank you to all for your valuable suggestions.

Since I am developing a Windows Desktop Gadget, the engine is IE7 which unfortunately does not support the CSS outline property. Since these buttons are simply meant to be clicked and do not need to retain focus, I have discovered that by adding:

document.getElementById(theButton).blur();

to the javascript code when the button is selected, it removes the blue highlight.

A similar issue with A tags handled with jquery can be found here: IE7 outline: 0 not working

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

Tips for making Slider display the next or previous slide when span is clicked

I have implemented a mix of bootstrap 3 and manual coding for my project. While the image thumbnails function correctly when clicked, the span arrows do not navigate to the next or previous images as intended. Below is the code snippet: var maximages ...

javascripthtmlcss

A revolutionary approach - Empowering websites with individual scrolling panels

I have a unique design layout that includes a top navigation, side navigation, and content. Both the side navigation and the content sections are taller than the page. My goal is to eliminate the need for a scrollbar for the entire page, but still mainta ...

htmlcssscrollbar

How can I use the *ngFor loop with the async pipe in Angular

I came across this interesting article where they showcase an ngFor loop that looks like this: *ngFor="let contact of contacts | async" I'm curious to know how the async pipe operates in this particular scenario? ...

javascripthtmlangular

Modify the content and display of a stationary div based on vertical positions

I am interested in creating a vertical website that features multiple divs appearing at specific y-points on the page. These divs will contain text and will always be positioned fixed at 20% from the left and about 250px from the top. My goal is to have t ...

javascripthtmltransition

Arranging 2 Divs next to each other and optimizing CSS code for efficiency

I’ve been delving into the world of CSS for a couple of months now, and I’ve hit a roadblock trying to align these two divs on the same line. My logo fits perfectly on the header bar, but I can't seem to get my login button to cooperate. Any tips ...

htmlcssbuttonnavbar

What is preventing jQuery 3 from recognizing the '#' symbol in an attribute selector?

After updating my application to jQuery 3, I encountered an issue during testing. Everything seemed to be working fine until I reached a section of my code that used a '#' symbol in a selector. The jQuery snippet causing the problem looks like th ...

javascriptjqueryhtmldomjquery-selectors

Update the button appearance with a Strikethrough effect using JavaScript

I'm working on a web application that allows users to create to-do items. My goal is to have the text field be crossed out when the checkbox is checked. When the "add todo" button is clicked, a new item is generated in JavaScript. Then, if the checkb ...

javascriptcssnode.jsstrikethrough

Tips for preventing CSS stripping in Google Earth info windows

</Placemark> <Placemark id="placemark1"> <name>City</name> <description> <![CDATA[<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; ch ...

csskmlgoogle-earthgoogle-earth-pluginkmz

Guide on adding space between rows in a table using HTML and Bootstrap 5

In the current table containing my content, it appears like this: https://i.sstatic.net/Mm7qT.png. I wish to add space between each row to create distinct separation and achieve a look similar to this: https://i.sstatic.net/ARgR1.png I experimented with ...

htmlcssdatatablesbootstrap-5

Changing the Color of Links in Bootstrap CSS

I'm completely new to coding and I've decided to dive into the world of Bootstrap. However, I'm facing a hurdle: I can't figure out how to customize the default Bootstrap styles with my own CSS. After researching online, here are the c ...

csstwitter-bootstrapbootstrap-4

JavaScript encountered an error stating "phone is not defined" due to an uncaught ReferenceError

Whenever I click on the Phone Number, it displays an error message saying that the function is not defined. How can I fix this issue? Thank you in advance! Here's the code snippet: <div class="product-label"> <h4><?php echo $p["Fu ...

javascriptphpjqueryhtml

Determining the pixel padding of an element that was initially set with a percentage value

I am working with a div element that has left padding assigned as a percentage, like so: padding-left: 1%; However, I need to obtain the value of this padding in pixels for some calculations after the window has been resized. When using JavaScript to chec ...

htmljquerycss

Enhancing Hover Effects in CSS with Additional Backgrounds

How can I create a div that changes its background to black with 50% opacity when hovered over, on top of an existing background image? Thank you! ...

cssbackgroundhover

Use jQuery ajax to send form data and display the received information in a separate div

I'm working on a PHP test page where I need to submit a form with radios and checkboxes to process.php. The result should be displayed in #content_result on the same page without refreshing it. I attempted to use jQuery Ajax for this purpose, but noth ...

phpjqueryhtmlajaxfixed

CSS might not always work properly on all web browsers, but it functions perfectly on Eclipse

When developing JSF pages with stylesheets, everything seems to be working fine in the Eclipse preview function. However, when I test the pages on IE8, the styles do not seem to have any effect. I am utilizing composite views to define a general layout fo ...

cssjsffacelets

Detecting Pixel Colors Across Multiple Overlapping Canvases

I have a challenge with multiple canvas elements on my webpage. I am trying to retrieve the pixel color of all overlapping canvas elements when they are stacked on top of each other. Let me illustrate with an example below. In this scenario, I am attempt ...

javascriptcsshtmlcanvas

Modifying Table Cell Backgrounds Based on Value in React Tables

I am currently utilizing reactstrap to design my table and employing axios to interact with my backend data. The objective is to dynamically change the background color of a cell based on its value. For instance, if the cell value is less than 0.25, it sh ...

cssreactjsreact-tablereactstrap

Choose all div elements except for those contained within a certain div

Having trouble with an IE7 z-index fixer that's affecting specific elements. I'm attempting to select all divs, excluding those nested within a particular div. Below is the jQuery code I'm using, but it's not functioning correctly: & ...

javascriptjqueryhtml

Styling for chosen or currently in use elements

Seeking assistance with creating a board using JavaScript and jQuery. The goal is for the user to select a cell (which adds an active class), then click on a different cell filled with a specific color, causing the original cell to fill in with the same co ...

jquerycss

Exploring techniques for showing a block div when hovering over an a tag

How can I make a div tag appear when hovering over an anchor tag? "Service" is the ID of the anchor tag "Services" is the ID of the div tag Here is my HTML code: <ul><li><a href="#" id="Service">Services</a>< ...

css