Related
I have a button that I'd like to customize differently than what I've set the global buttons. I added the button and modified it but there is no option for editing the hover color of the button so I am trying to write additional CSS for it.
I set up a new class for the button
Custom-Button-Orange-to-Purple
but when I try to add the additional styling to this element (I did try and set up the class without the :hover and that didn't work either).
.Custom-Button-Orange-to-Purple:hover {
background-color:#8601AF !important;
border-color:none !important;
}
The button I'm trying to modify is the orange one at the bottom of the page here: Kidz Haven Daycare . The code changes the border of the button to purple which I don't want.
I'm new to adding custom CSS (obviously) and would be grateful for some help!
This is what your CSS looks like, which is absolutely wrong:
.wp-block-button:hover .Custom-Button-Orange-to-Purple:hover has-custom-font-size:hover {
border-radius:8px;
background-color:#8601AF !important;
}
Also, there is no element with the class Custom-Button-Orange-to-Purple.
This is what I understand from your question: You have customized the style of usual buttons, and now you want to style a button which should look different. If so, this may help:
.btn-default {
width: 100px;
}
.btn-default:hover {
background-color: skyblue;
color: #fff;
}
.btn-special:hover {
background-color: purple;
color: #fff;
font-weight: bold;
}
<button class="btn-default">Normal Button</button>
<button class="btn-default">Normal Button</button>
<button class="btn-default btn-special">Special Button</button>
This took a full days worth of hunting and trying different methods. What I did was to get rid of the class name I had added to the "Advanced" tab where I created the custom button. Instead I added HTML to the block on the page where the button would appear. I used a div container as well to be able to center it on the page.
HTML added to the block with new class names:
<div class="Center-Aligned-Custom-Button-Orange-to-Purple">
WHY KIDS HAVEN DAYCARE
ADDITIONAL CSS:
.Center-Aligned-Custom-Button-Orange-to-Purple {
display:flex;
justify-content:center;
align-items:center;
}
.Custom-Button-Orange-to-Purple {
border-radius:8px !important;
font-family:Roboto !important;
font-size:15px !important;
font-weight:500 !important;
line-height: 25px !important;
padding-left: 15px!important;
padding-right: 15px!important;
padding-top: 1px !important;
padding-bottom: 1px !important;
text-align: center !important;
background-color: #FB9902 !important;
color: #fff !important;
position: absolute !important!;
}
I'm not certain if I "needed" to use the !important but given the amount of time it took to figure this out, I figured it was better safe than sorry!
Thanks for the responses. I'm a total newbie, so some comments were over my
I added this but still the blue outline appear when the button is clicked.
.btn:focus {
outline: none;
}
how to remove that ugly thingy?
May be your properties are getting overridden.
Try attaching !important to your code along with the :active .
.btn:focus,.btn:active {
outline: none !important;
box-shadow: none;
}
Also add box-shadow because otherwise you will still see the shadow around button.
Although this isn't a good practise to use !important I suggest you use more specific class and then try applying the css with the use of !important...
There are built-in boostrap class shadow-none for disabling box-shadow (not outline) (https://getbootstrap.com/docs/4.1/utilities/shadows/). This removes shadow of button:
<button class='btn btn-primary shadow-none'>Example button</button>
Update: docs link for bootstrap 5: https://getbootstrap.com/docs/5.1/utilities/shadows/, and for beta: https://getbootstrap.com/docs/5.2/utilities/shadows/
In the latest version of Bootstrap, I found removing outline itself doesn't work. And I have to add this because there is also a box-shadow:
.btn:focus, .btn:active {
outline: none !important;
box-shadow: none !important;
}
Try Below Code
.button:active,
button:active,
.button:focus,
button:focus,
.button:hover,
button:hover{
border:none !important;
outline:none !important;
}
This was happening to me in Chrome (though not in Firefox). I've found out that the outline property was being set by Bootstrap as outline: 5px auto -webkit-focus-ring-color;. Solved by overriding the outline property later in my custom CSS as follows:
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
outline: 0;
}
this will solve button with a text, button only a icon or a button is a link:
<!--1. button with a text -->
<button type="button" class="btn btn-success" id="newWord">Save</button>
<!--2. button only with a close icon -->
<button type="button" class="close"></button>
<!--3. button is a link -->
<a class="btn btn-success btn-xs" href="#">Save</a>
button,
button:active,
button:focus,
button:hover,
.btn,
.btn:active,
.btn:focus,
.btn:hover{
outline:none !important;
}
if you add border:none !important;
{
border:none !important;
outline:none !important;
}
then the button will become smaller size when clicked.
In Bootstrap 4 they use
box-shadow: 0 0 0 0px rgba(0,123,255,0); on :focus, so i solved my problem with
a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
outline: 0;
outline-color: transparent;
outline-width: 0;
outline-style: none;
box-shadow: 0 0 0 0 rgba(0,123,255,0);
}
Try this
.btn
{
box-shadow: none;
outline: none;
}
The SCSS way for all elements (not only buttons):
body {
* {
&:focus, &.focus,
&:active, &.active {
outline: transparent none 0 !important;
box-shadow: 0 0 0 0 rgba(0,123,255,0) !important;
-webkit-box-shadow: none !important;
}
}
}
This may help if someone still has this question unresolved.
(function() {
$('button').on('click', function() {
$("#action").html("button was clicked");
console.log("the button was clicked");
});
})();
.btn-clear {
background-color: transparent !important;
border-style: none !important;
cursor: pointer;
}
.btn-clear:active,
.btn-clear:focus {
outline-style: none !important;
outline-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this button has default style -->
<button>Action</button>
<!-- this button is clear of style -->
<button class="btn-clear">Action</button>
<label id="action"></label>
I just had the same issue and the following code worked for me:
.btn:active, .btn:focus, .btn:active:focus, .btn.active:focus {
outline: none !important;
}
.btn {
margin:32px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<button type="button" class="btn btn-default">Button</button>
Hoping it will help!
You need to use proper nesting and then apply styles to it.
Right click on button and find the exact class nesting for it using (Inspect element using firebug for firefox), (inspect element for chrome).
Add style to whole bunch of class. Only then it would work
I found this quite useful in my case after the button click.
$('#buttonId').blur();
I opted to simply remove the border width on :focus. This removes the ugly space between the outline and the button's rounded corners. For some reason this issue only happens on actual button elements and not <a class="btn"> elements.
button.btn:focus {
border-width: 0;
}
Sometimes {outline: 0} didn't solve the problem and we can try {box-shadow: none;}
Here's my Boostrap 4 solution to remove the button outline
/*
* Boostrap 4
* Remove blue outline from button
*/
.btn:focus,
.btn:active {
box-shadow: none;
}
Actually in bootstrap is defined all variables for all cases. In your case you just have to override default variable '$input-btn-focus-box-shadow' from '_variables.scss' file. Like so:
$input-btn-focus-box-shadow: none;
Note that you need to override that variable in your own custom '_yourCusomVarsFile.scss'. And that file should be import in project in first order and then bootstrap like so:
#import "yourCusomVarsFile";
#import "bootstrap/scss/bootstrap";
#import "someOther";
The bootstraps vars goes with flag '!default'.
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
So in your file, you will override default values.
Here the illustration:
$input-focus-box-shadow: none;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
The very first var have more priority then second one. The same is for the rest states and cases.
Hope it will help you.
Here is '_variable.scss' file from repo, where you can find all initials values from bootstrap: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss
Chears
Even after removing the outline from the button by setting its value to 0, There is still a funny behaviour on the button when clicked, its size shrinks a bit. So i came up with an optimal solution:
.btn:focus {
outline: none !important;
box-shadow: 0 0 0 0;
}
Hope this helps...
How to avoid border focus on click of bootstrap buttons:
.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-secondary.dropdown-toggle:focus {
box-shadow: none;
}
.btn.focus, .btn:focus {
outline: 0;
box-shadow: none;
}
How to avoid border focus on click of bootstrap input fields:
.form-control.focus, .form-control:focus {
outline: 0;
box-shadow: none;
}
If this doesn't work for your specific case, then I suggest you to open the inspector page, click on the selector tool (small arrow in a box in the top-left corner) click on the element you are trying to edit, then click again on the same element and look at the "Styles" tab to see what changes in terms of CSS... search something related to "focus" and you should be able to detect the code you have to overwrite in your CSS. Hope this is helpful.
a:focus {
outline: none;
}
this works for me on BS3
This one worked for me in Bootstrap 4:
.btn {border-color: transparent;}
Try
.btn-primary:focus {
box-shadow: none !important;
}
Keep in mind, if you're button is inside of an anchor like:
<a href='some_link'>
<button class='btn'>Button</button>
</a>
Adding the style to the button itself may not be enough, you may need to add the a:focus, a:active { outline: none } CSS rules where appropriate (this worked for me).
Try the below
.bootstrap-select .dropdown-toggle:focus
{
outline: 0 !important;
}
I'm using bootstrap 4, you can use outline and box-shadow.
#buttonId {
box-shadow: none;
outline: none;
}
Or if the button is inside an element like a div without back-ground, box-shadow is enough.
#buttonId {
box-shadow: none;
}
Example: https://codepen.io/techednelson/pen/XRwgRB
If you are using version 4.3 or higher, your code will not work properly.
This is what I used. It worked for me.
.btn:focus, .btn:active {
outline: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
Instead to target on button class (.btn), here I target to button element itself and it works for me.
button:focus {
outline:none !important;
box-shadow:none !important;
}
And can use shadow-none class for input field
You can add below answer to your _variable.scss file, no need to change the other outline or any thing. I'm sure this will work.
$btn-active-box-shadow: none !important;
For Check box and radio buttons
.form-check-input:checked ,.form-check-input:focus,.form-check-input:active {
outline: none !important;
box-shadow: 0 0 0 0 rgba(0,123,255,0) !important;
-webkit-box-shadow: none !important;
}
Here's a non-CSS method. Using JQuery, simply remove the "focus" class whenever the element is has been clicked.
$(".btn").mousemove(function(element) {
$(this).removeClass("focus");
});
This method may cause the border to flash into existence and then back out briefly, which doesn't look bad in my opinion (it looks like part of the response when the button is clicked).
The reason I used .mousemove() is that .click() and .mouseup() both proved to be ineffective.
This is a problem that I've been having for quite some time now. For some reason, the CSS rules for my links aren't working properly. As far as I can tell, when using Chrome's Inspect Element tools or FireBug, the links appear to be styled correctly, but are displayed improperly. I've added separate classes to make separate styles of links, and even tried separating a:visited, and this fixed the basic issue for each class, but the normal a tag still displays visited links the wrong color. the CSS for my links has been below.
a:link, a:hover, a:active
{
text-decoration: none;
color: #FF8C00;
background-color: transparent;
}
a:visited
{
text-decoration: none;
color: #FF8C00;
background-color: transparent !important;
}
a.search:link, a.search:visited, a.search:hover, a.search:active
{
font-family: helvetica-light;
font-size: 19px;
color: #999;
text-decoration: none;
background-color: transparent;
}
a.nav:link, a.nav:visited, a.nav:active, a.nav:hover
{
text-decoration: none;
color: #E3E3E3;
font-family: helvetica-light;
font-size: 20px;
background-color: transparent;
}
For some reason, even though a:link/etc have "color: #FF8C00" they show up as black or dark gray when visited. Active, link and hover all work normally. All HTML is written as stuff
Have you tried changing;
color: #999;
Into;
color: #999 !important;
This will tell the CSS parser to overwrite the #FF8C00 color to #999.
Changing the order of the CSS blocks could also give you the expected result.
Sometimes getting the look you want might require some trial and error. :)
A couple of things you could try
clear your browser cache
Make sure no other css files are been called
Go to w3c html validation site
I finally found the solution to my own problem. I had initially copied elements of my CSS from an older project I was working on. Somehow, an "a:visted" declaration had ended up inline with an ID declaration and didn't break the CSS, but caused the links to not appear properly.
I am using XHTML 1.0 Strict on my website and have the following CSS style on my links:
a:hover {
border-bottom: 1px dotted #447799;
}
and my images:
a img, img {
border: none;
text-decoration: none;
}
Yet, when I hover over my title banner the bottom border still shows up dotted and blue. Obviously, I can't use border="0" because it is not part of the XHTML 1.0 Strict Doctype.
You can see my site here: armorycraft.com
Suggestions?
You could use a class:
a.imageAnchor:hover {
border:none;
}
Not the most beautiful solution, but it should work.
Try this:
a img:hover, img:hover {border:none; text-decoration:none;}
Problem is border is attached to the anchor, but then you're setting a border: none to the image.
There's no simple way to avoid this. I'd suggest tweaking the thing a little bit:
a:hover {
border-bottom: 1px dotted #447799;
}
a.image:hover {
border: none;
}
So, add the "image" class to all anchors with images and you're done.
a:hover has border:1, so automaticly a:hover img als has border:1
I think this would fix it
a:hover img{border:0;}
now you dont need to make a whole new class for it
This worked for me: (I think you just forgot the colon (:)
a:img, img {
border: none;
text-decoration: none;
}
Good luck!
I can make Firefox not display the ugly dotted focus outlines on links with this:
a:focus {
outline: none;
}
But how can I do this for <button> tags as well? When I do this:
button:focus {
outline: none;
}
the buttons still have the dotted focus outline when I click on them.
(and yes, I know this is a usability issue, but I would like to provide my own focus hints which are appropriate to the design instead of ugly grey dots)
button::-moz-focus-inner {
border: 0;
}
No need to define a selector.
:focus {outline:none;}
::-moz-focus-inner {border:0;}
However, this violates accessibility best practices from the W3C. The outline is there to help those navigating with keyboards.
https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples
If you prefer to use CSS to get rid of the dotted outline:
/*for FireFox*/
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
{
border : 0;
}
/*for IE8 and below */
input[type="submit"]:focus, input[type="button"]:focus
{
outline : none;
}
The below worked for me in case of LINKS, thought of sharing - in case someone is interested.
a, a:visited, a:focus, a:active, a:hover{
outline:0 none !important;
}
Cheers!
:focus, :active {
outline: 0;
border: 0;
}
[Update] This solution doesn't work anymore. The solution that worked for me is this one https://stackoverflow.com/a/3844452/925560
The answer marked as correct didn't work with Firefox 24.0.
To remove Firefox's dotted outline on buttons and anchor tags I added the code below:
a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: 0;
outline : 0;
}
I found the solution here: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html
Tried most of the answers here, but none of them worked for me. When I realized that I have to get rid of the blue outline on buttons on Chrome too, I found another solution. Remove blue border from css custom-styled button in Chrome
This code worked for me on Firefox version 30 on Windows 7. Perhaps it might help somebody else out there :)
button:focus {outline:0 !important;}
This will get the range control:
:focus {
outline:none;
}
::-moz-focus-inner {
border:0;
}
input[type=range]::-moz-focus-outer {
border: 0;
}
From: Remove dotted outline from range input element in Firefox
There's no way to remove these dotted focus in Firefox using CSS.
If you have access to the computers where your webapplication works, go to about:config in Firefox and set browser.display.focus_ring_width to 0. Then Firefox won't show any dotted borders at all.
The following bug explains the topic: https://bugzilla.mozilla.org/show_bug.cgi?id=74225
There is many solutions found on the web for this, many of which work, but to force this, so that absolutely nothing can highlight/focus once a use the following:
::-moz-focus-inner, :active, :focus {
outline:none;
border:0;
-moz-outline-style: none;
}
This just adds that little bit extra security & seals the deal!
Simply add this css for select box
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
This is working fine for me.
Tested on Firefox 46 and Chrome 49 using this code.
input:focus, textarea:focus, button:focus {
outline: none !important;
}
Before (white dots are visible )
After ( White dots are invisible )
If you want to apply only on few input fields, buttons etc. Use the more specific code.
input[type=text] {
outline: none !important;
}
I think you should really know what you're doing by removing the focus outline, because it can mess it up for keyboard navigation and accessibility.
If you need to take it out because of a design issue, add a :focus state to the button that replaces this with some other visual cue, like, changing the border to a brighter color or something like that.
Sometimes I feel the need to take that annoying outline out, but I always prepare an alternate focus visual cue.
And never use the blur() js function. Use the ::-moz-focus-inner pseudo class.
In most cases without adding the !important to the CSS code, it won't work.
So, do not forget to add !important
a, a:active, a:focus{
outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
}
Or any other code:
button::-moz-focus-inner {
border: 0 !important;
}
button::-moz-focus-inner { border: 0; }
Where button can be whatever CSS selector for which you want to disable the behavior.
You might want to intensify the focus rather than get rid of it.
button::-moz-focus-inner {border: 2px solid transparent;}
button:focus::-moz-focus-inner {border-color: blue}
Remove dotted outline from links, button and input element.
a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: 0;
outline : 0;
}
If you have a border on a button and want to hide the dotted outline in Firefox without removing the border (and hence it's extra width on the button) you can use:
.button::-moz-focus-inner {
border-color: transparent;
}
The CSS code below works to remove this:
a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: 0;
outline : 0;
}
It looks like the only way to achieve this is by setting
browser.display.focus_ring_width = 0
in about:config on a per browser basis.
This works on firefox v-27.0
.buttonClassName:focus {
outline:none;
}
After trying many options from the above only the following worked for me.
*:focus, *:visited, *:active, *:hover { outline:0 !important;}
*::-moz-focus-inner {border:0;}
Along with Bootstrap 3 I used this code. The second set of rules just undo what bootstrap does for focus/active buttons:
button::-moz-focus-inner {
border: 0; /*removes dotted lines around buttons*/
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus{
outline:0;
}
NOTE that your custom css file should come after Bootstrap css file in your html code to override it.
Yep don't miss !important
button::-moz-focus-inner {
border: 0 !important;
}
You can try button::-moz-focus-inner {border: 0px solid transparent;} in your CSS.