Ive styled the :active state of a link already but when you click it in Chrome you get a blue outline as you can see in the 2nd button below:
How can I disable this styling, ideally for all browsers?
Adding outline: 0; to the CSS does the trick for form elements and buttons.
I believe what you are looking for is the CSS property outline.
For Example
a {
outline: none;
}
a { border: 0 }
You should edit the anchor tag's global CSS, not just for its active state. Also, look into modernizr.
Related
First thing is, I can only edit the CSS/LESS portion of the code.
I've encountered a problem, there's a span that has a background color added on :hover and a different background upon clicking it, where it gets a class .active via JS.
Problem is, on iPad and iPhone on first tap it activates the :hover styles, a secondary tap is required to turn on the added class .active. Anyone knows how to ignore the :hover style and go straight to adding a class?
Much appreciated!
Place all your :hover rules in a #media block:
#media (hover: hover) {
a:hover { color: blue; }
}
Do this
a:hover {
background-color: transparent !important; /* If it works without adding !important, then do that. It's best to avoid !important */
}
Focus
This seems to be a known issue. Please check "https://getbootstrap.com/docs/3.3/getting-started/#support-sticky-hover-mobile" for more details. Few of the possible solutions to solve the above problem is "http://www.javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml"
I am using a bootstrap 3.3.7 button, and want the button to stay the same color when a mouse focuses, hovers, or clicks on it.
<button class="btn btn-default delete-btn">Delete</button>
Here is where I modify the background-color for my CSS selectors:
.delete-btn:hover, .delete-btn:focus, .delete-btn:active {
background-color: white;
}
This works just fine for a focus or hover event.
However, when the mouse clicks on the button, it changes to it's default grey color. Any ideas what I am missing here? Scratching my head...
The Bootstrap stylesheet has this set of selectors:
.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover
.btn-default:active:focus and .btn-default:active:hover are more specific than selectors with only one pseudo-class.
You need to make your selector equally specific:
.delete-btn:hover, .delete-btn:focus,
.delete-btn:active:hover, .delete-btn:active:focus, {
background-color: white;
}
Try the selector .btn.btn-default.delete-btn instread of only .delete-btn and use important.
.btn.btn-default.delete-btn:hover, .btn.btn-default.delete-btn:focus, .btn.btn-default.delete-btn:active {
background-color: white !important;
}
Else, Inspect element on your browser to find the grey color and replace the whole css rule with white color.
Else, check if there is something wrong going on in your javascript and replace your color rule with click event.
Try add important at the end of code like this:background-color: white!important; .
use !important in your styles to replace default styles of bootstrap
Add !important after your css attributes which replace bootstrap default css with yours and give priority to your css For avoiding box shadow use box-shadow. Add This Css:---
.delete-btn:hover, .delete-btn:focus, .delete-btn:active {
background-color: white !important;
box-shadow: none !important;
}
I am using contenteditable on my web pages. This works fine but the browser puts an ugly border around the editable section when it is activated. Also, some of these borders are not erased when the focus is changed to another element on the page.
Safari creates a light blue border, Firefox uses a thin black line, so there is some browser interpretation at work here.
I have tried explicitly setting the border on the editable sections to none and making that CSS property important, but this does not change the browser's behavior.
My question:
Is there a way to influence the styling of the page element that overrules the border property when the user has clicked inside it to start editing?
Add this style (JsFiddle):
[contenteditable="true"]:active, [contenteditable="true"]:focus
{
border:none;
outline:none;
}
To let all contenteditable elements not use border and outline when focuesed.
EDIT: I found an excellent tutorial
Try adding outline:none in css for the form elements to remove the border highlight property outline:none in css for input elements.
For example:
input:focus{
outline:none;
}
textarea:focus{
outline:none;
}
select:focus{
outline:none;
}
For working code find the Jsfiddle link
[contenteditable="true"]:active,
[contenteditable="true"]:focus
{
border:none !important;
outline:none !important;
}
I have a question on accessibility on a postchat survey window which I've worked on.There's a close button on the top right(as an image of X) where I've included visual focus by putting focus pseudo class, now the problem i'm facing is that the close button has white border around it when it is focused and this is happening as expected in chrome, Mozilla but in IE a blue border is coming. Can someone help me how to remove this blue border and bring white in its place?
I'm sharing the code snippet where I've used focus
a.close-link:focus {
outline: 1px dotted white;
}
Though active and focus are to different states but you can try both at same time for your purpose i think
:active Adds a style to an element that is activated
:focus Adds a style to an element that has keyboard input focus
:hover Adds a style to an element when you mouse over it
:lang Adds a style to an element with a specific lang attribute
:link Adds a style to an unvisited link
:visited Adds a style to a visited link
following source http://www.w3schools.com/CSS/css_pseudo_classes.asp
a.close-link:focus, a.close-link:active {
outline: 1px dotted white;
}
:FOCUS pseudo-class does work in IE, Instead, I believe your problem is with outline property.
Try this:
IE 9
George Langley wrote in to say that IE 9 apparently doesn't allow you
to remove the dotted outline around links unless you include this meta
tag:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
((source))
Well i've found out a workaround. For IE9 border comes by default so I've removed border now and the blue outline is no more there!
a.close-link:focus {
outline: 1px dotted white;
}
a.close-link img {
border: none;
}
I need to disable the mouse hover on a particular button(not on all buttons) in the entire DOM. Please let me know how to achieve it using a CSS class.
i am using the below CSS class when my button is disabled. now i want to remove the hover effect using the same class.
.buttonDisabled
{
Cursor:text !important; Text-Decoration: None !important;
}
The above class will take care of removing the hand sign and text underline on mouse over . Now i want to remove hover effect also. Please let me know.
I have really simple solution for this.
just create a new class
.noHover{
pointer-events: none;
}
and use this to disable any event on it. use it like:
<a href='' class='btn noHover'>You cant touch ME :P</a>
You can achieve this using :not selector:
HTML code:
<a class="button">Click me</a>
<a class="button disable">Click me</a>
CSS code (using scss):
.button {
background-color: red;
&:not(.disable):hover {
/* apply hover effect here */
}
}
In this way you apply the hover effect style when a specified class (.disable) is not applied.
Here is way to to unset the hover effect.
.table-hover > tbody > tr.hidden-table:hover > td {
background-color: unset !important;
color: unset !important;
}
For this I ended up using an inline style because I only wanted the one particular element not to have any hover on-click event or style due to it just being part of instructions regarding the other buttons that looked like it on the page, and to give it override precedence. Which was this:
<button style="pointer-events:none"></button>
This removed all styling and bound JavaScript/JQuery functionality on the single element for me, while not affecting the others on the page :). For more info see the mozilla reference.
To disable the hover effect, I've got two suggestions:
if your hover effect is triggered by JavaScript, just use $.unbind('hover');
if your hover style is triggered by class, then just use $.removeClass('hoverCssClass');
Using CSS !important to override CSS will make your CSS very unclean thus that method is not recommended. You can always duplicate a CSS style with different class name to keep the same styling.
From your question all I can understand is that you already have some hover effect on your button which you want remove.
For that either remove that css which causes the hover effect or override it.
For overriding, do this
.buttonDisabled:hover
{
//overriding css goes here
}
For example if your button's background color changes on hover from red to blue. In the overriding css you will make it as red so that it doesnt change.
Also go through all the rules of writing and overriding css. Get familiar with what css will have what priority.
Best of luck.
Do this Html and the CSS is in the head tag. Just make a new class and in the css use this code snippet:
pointer-events:none;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.buttonDisabled {
pointer-events: none;
}
</style>
</head>
<body>
<button class="buttonDisabled">Not-a-button</button>
</body>
</html>
Add the following to add hover effect on disabled button:
.buttonDisabled:hover
{
/*your code goes here*/
}
Use transition: all 100s ease-in-out; to override the hover change. This is not a solution but a workaround if you do not know the original value of the property which you want to replace.
Other solutions didn't work for me.
I simply changed this
.home_page_category_links {
color:#eb4746;
}
to this:
.home_page_category_links, .home_page_category_links:hover {
color:#eb4746;
}
That means the same styles that are applied to elements of that class are also applied to elements of that class when hovered.
Extra note: If you're keeping the colour the same, perhaps you may also want to avoid any underline, if so, just include text-decoration: none; as well (or text-decoration: none !important; if using bootstrap).
I tried the following and it works for me better
Code:
.unstyled-link{
color: inherit;
text-decoration: inherit;
&:link,
&:hover {
color: inherit;
text-decoration: inherit;
}
}
What I did here is that I make the hover effect on the button but doesn't apply to the button that has the disabled class
button:hover:not(button.disabled){
background-color: rgb(214, 214, 214);
color: rgb(0, 0, 44);
}
Problem which I understood - Well I was doing something the same as yours. I have used four links among which two of them will hover and the other two will not. Now that I have used the a tag(hyperlink tag in HTML) to use hover, all my hyperlinks start hovering, which I don't want.
So, I put the two a tags which were not supposed to hover inside the same class, say .drop, and use the class to specify that I want all a tags inside the dropped class not to hover but the other a tags do.
To do so, I just wrote a CSS
a:not(.drop):hover {background-color: limegreen}
what I meant here is that apply a hover to all the tags but not the ones which are inside the .drop class.
Hope that helps!
#Simone Colnaghi was the first to mention it, and it worked for me too.
I have also faced the similar problem but the below method works for me.
Lets suppose you have two class, wantsHover and dontWantsHover just use:
.wantsHover:not(.dontWantsHover):hover {
background-color: red;
}