Remove selection from active button

Question

I have several tabbed buttons for the options menu. Everything looks the way I want, and everything works fine. The only problem I encountered is the blue backlight of the active button. How to remove it?

For reasons I don’t understand, my piece of code does not reproduce 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> 

Answer 1

Thank you all for your suggestions.

Since this is a Windows Desktop gadget, I am working on the IE7 engine and it does not support the CSS property. Since these are buttons that have done their work as soon as they are pressed, there is no need to keep them in focus. I found that adding:

 document.getElementById(theButton).blur(); 

for javascript, when you select a button, it clears the blue highlight.

There is a similar issue with A tags addressed with jquery: IE7: 0 schema not working

Answer 2

Just 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 3

add

 outline:0; 

in css

 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>