Disabling default styling for button:disabled - css

Is there any way to revert the default styling of button:disabled WIHTOUT using all: unset? I don't know what is being changed because if I do something like this:
button:disabled {
opacity: 1;
}
it still dosent work


Try styling the background-color instead of opacity
button:disabled {
background-color: #ccc;
color: black;
}
<button disabled>Button Disabled</button>
<button>Button</button>

Related

CSS Style in React

I don't know why my input element doesn't change color when hovering
<input
id='running'
className={filterButtonsSytles.button}
style={{backgroundColor: this.state.running ? 'grey':'white'}}
type="button"
value="Bieganie"
onClick={(e)=>this.clickHandler(e)}
/>
css
.button {
border: 1px solid black;
cursor: pointer;
}
.button:hover {
background-color: grey;
}

You have to give !important flag on hover because your style in in react element is inline style and inline style does not let override by any external css
To make this right
.button:hover {
background-color: grey!important;
}
To make it more precise !important is not recommended . you should be using classes for this.

Change link opacity on hover with CSS

Why doesn't this work? The text color changes, but the opacity does not.
<style>
.button:hover{
color: #FFFF00;
opacity: 0;
}
</style>
https://jsfiddle.net/tmgordon/veL0n4g2/2/

Inline styles override CSS. So get rid of that HTML style attribute or you'll have to use JavaScript. Style everything with external CSS, so it gets cached into the users Browser as well. Make sure you change the src if you change your CSS, or the Clients Browser may remember the old CSS.

You can try this.
<style>
.button {
opacity: 0.3;
}
.button:hover{
color: #FFFF00;
opacity: 0;
}
</style>

CSS :valid :invalid behaves different when using the sibling selector in IE

I have the following code:
<style>
input:valid ~ .test {
border: 1px solid green;
}
input:invalid ~ .test {
border: 1px solid red;
}
input:valid {
border: 1px solid green;
}
input:invalid {
border: 1px solid red;
}
</style>
<input type="text" required />
<div class="test">test</div>
now if u start typing in the textbox, the validation should modify the borders of both the input and the "test" div. This works in Chrome, however in IE the "test" div border change only gets triggered once i click somewhere else.
Why does this behave different in IE? and how can i make it work properly
EDIT: potatopeelings's answer was correct, but it seemed i simplified my question a bit too much.
input:valid ~ small .actionEmpty {
display: block;
}
input:invalid ~ small .actionEmpty {
display: none;
}
it doesn't seem to work in case of display css settings, well the invalid one seems to work and the valid one doesn't weird. the behavior there is still on mousedown
any more ideas?

This seems very similar to :empty pseudo class issue with added/removed content and sibling combinators (this one is however for the + combinator and the :empty pseudo class). However a similar fix would work, namely add an infinitely looping animation on the .test element - add this at the end of your style section
input + .test {
animation: repaint 1000s infinite linear;
}
#keyframes repaint {
from { opacity: 1; }
to { opacity: 0.99999; }
}
Note that I changed it from zoom (in the linked question) to opacity.

What is the command that can change the text color to #000000 when clicked upon

I don't know what the command is called to change the text color when clicked upon. I've tried different variations of textarea:focus, input:focus and textarea:active, input:active but it didn't work.
input, textarea {
background: #fff;
border: none;
color: #aaa;
font-size: 12px;
line-height: 1.0em;
margin: 0;
outline: none;
text-align: center;
padding: 0;
text-decoration: none;
}
input: active textarea: active {
color: #000000;
}

input:focus will work fine, see this Fiddle.
<input type="text" value="Click me to make me green!">
CSS:
input {
color:red;
width:20em;
}
input:focus {
color:green;
background:#dfd;
}
The :focus state indicates that the element is currently selected and accepting input. Read more over at W3.
If you want to permanently change the color on first click you're introducing 'custom persistent state', which is not behavioral and as such not possible via CSS but only by using Javascript, for example to add a class to the element.

There are some CSS ways to do it- like an answer here already. Here's an example with Javascript. Like it has been said, Javascript should be used if you want to permanently change the color.
HTML
<p id="change">Hello World!</p>
Javascript
document.getElementById('change').onclick = changeColor;
function changeColor() {
document.body.style.color = "blue";
return false;
}
Fiddle Here

bootstrap button shows blue outline when clicked

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.

Resources