We Keep Coding

outline behaviour while focus on click and focus on tab

I got CSS or jQuery/JavaScript question.
I set on many elements tabindex="0" because I need to provide tabbing through page, but I'm wondering why on pages like stackoverflow.com or developer.mozilla.org when I click by mouse I can't see outline on focus, but on my page when I click by mouse I can see outline.
Are they really setting some jQuery/JS preventing showing outline or maybe there is some good way of setting outline in css to prevent showing it?
Edit:
1. Elements on my page should have outline when user is tabbing through page by tab key,
2. Elements on my page should not have outline when user is clicking on elements by mouse

You Can Use
input,button,textarea,-----{
outline: 0; //or outline: none;
} (OR)
// Create One Class With Above Property ,Give That Class To Particular Html Element Like Below ,
.className{
outline: 0; //or outline: none;
}

When user hits back button, css element that's styled by previous click is still styled

I have a CSS style set for an element when someone clicks or hovers on the element. On mobile Safari, when users click it to go to a new page but then hit the browser's back button, it's still shown in the "click" color. Is there a way to stop this?
.button:hover, .button:active
{
color: red;
}

Mobile safari browser has this typical way of handling pages i.e., once it redirects to new page it will cache the page state itself or snapshot of page and when you come back it will show that snapshot directly. I too faced these kind of issues but i didn't found a rigid solution.
I solved the issue by changing the color of button back to whatever(default) in the click handler itself and then performed my remaining actions in your case it is redirection. Hope it will help you as a quick fix for the issue

You're looking for the :visited selector:
.button:hover, .button:active
{
color: red;
}
.button:visited
{
color: blue;
}

How to clear touch screen "touched" button focus, active, hover

Trying to figure out how to reset a button back to the "untouched" state. I am using a button as:
<div id="service-control-buttons" data-role="controlgroup" data-type="horizontal">
Prev
Next
</div>
When I tap (on my iPad) Next or Prev it runs a javascript function I wrote and then the button remains permanently active, hovered or focused (not sure the state).
My goal: After the javascript function runs, I want to reset the button back to the un-active, un-hovered or un-focused state. Of course, this doesn't happen on non-touch screen mouse click.
I've tried:
$(another-selecter).focus();
$(another-selecter).click();
$('#service-next').blur();
Also
$('#service-next').css('background-color', 'original-color')
works but of course, that's the end of the highlighting altogether and I don't want that. I don't want to manually set css as I use themes that may change in the future and want to avoid hacks if possible.

To prevent this, you can customize the hover effects for touch screens using the following #media in you CSS file.
#media (hover: none) and (pointer: coarse) {
/* Add hover styles here */
}
Use Case Example
Lets say we have a button with id btn-one that has a transparent bg color but the hover effect changes it to red.
By applying the code below, when a user with a touch device interacts with the app, the #media will trigger style changes. Keeping the bg color transparent on hover. In this way we can prevent the button having a sticky behavior.
By the contrary if the device isn't a touch screen the hover styles will work as if this #media doesn't exist, and so the bg colors will change on hover, normally.
#media (hover: none) and (pointer: coarse) {
#btn-one:hover {
background-color: transparent!important;
color: black;
}
}

Return Bootstrap .navbar-toggle to its normal state after click

Using Bootstrap v3.3.4 out of the box, no custom CSS.
When clicking on the hamburger button, the navigation expands as it's supposed to, although the button itself stays in a "pressed" mode and only returns to its normal state when clicking elsewhere on the page.
Anyone know how to make the hamburger button return to its normal state right after it gets clicked?
This is the button I'm referring to, to avoid confusion:
<button class="navbar-toggle" data-toggle="collapse">...

It's because the button keeps focus, and bootstrap styles for that.
Change the styles for the pseudo selector :focus:
.navbar-default .navbar-toggle:focus{
background-color: transparent;
}
Note you will want to re-apply your :hover styles, as the :focus styles will take precedence when the button is both focused and hovered:
.navbar-default .navbar-toggle:hover{
background-color: #ddd;
}
Bootply

bootstrap 3 button hover/focus state

Bootstrap 3's buttons' hover state looks exactly the same with its focus state.
Is there a way to change this? I know it's just a cosmetic issue, but I want the hover state to go away when the mouse hovers away, yet still have another distinct feature to know the button has focus.
I don't know if this is my browser's issue or it is really intended (or a bug?).
I'm using Chrome latest. (Version 34.0.1847.131 m)
Link to Bootstrap 3 button samples.
http://getbootstrap.com/css/?#buttons-tags
Click on the 3rd button labelled "Input" and move mouse out.
--
Update:
I've tried overriding the default focus/hover styles, but now the button is stuck in the focus state even when you mouseover it. Is there a way to get over this? It seems the focus state has higher priority in styles than hover.
--
Thanks for the pointers guys.
For the intended behavior of still having a distinct hover state despite being in focus, the hover state needed to be redefined again.
The css I added went like this:
.btn-default:focus,
.btn-default:active,
.btn-default.active
{
background-color: #ffffff;
}
.btn-default:hover
{
background-color: #ebebeb;
}

You can override the bootstrap styles. First make sure your stylesheet or style declaration is added after bootstrap, for example:
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<link rel="stylesheet" href="/stylesheets/styles.css">
Then in your css:
.btn:focus {
background-color: red;
}

Instead of overriding the styles just make the click event .blur() from jquery.
It will remove focus on click and problem solved!

Anyone looking for Bootstrap 4, try this in your custom style CSS file
.btn-dark:hover, .btn-dark.active {
background: #31bda5;
box-shadow: none;
}