index.html:
<div>
<span>
<button disabled>
Button 1
</button>
<button>
Button 2
</button>
</span>
</div>
index.less:
:not(&[disabled]) button {
background-color: red;
}
This gives the below output. Both buttons are colored red but I am trying to target only button that is not disabled.
Is there a way to do this? I am specifically looking to target buttons that are not disabled.
Here is the jsfiddle : https://jsfiddle.net/6gqb19e3/36/
I am new to LESS and my syntax was wrong. After bit of trial and error, I came up with this:
button {
background-color: grey;
&:not([disabled]) {
background-color: green;
}
}
and it gives this output:
Here is the jsfiddle with: https://jsfiddle.net/6gqb19e3/81/
Related
This question has a Stackblitz demo; Given the following Angular Material button
<button md-button>
<span>Foo</span>
<md-icon>keyboard_arrow_down</md-icon>
</button>
How can I increase the gap between Foo and the icon (see below):
I thought this would be easy but Angular Material wraps the contents in <span class="mat-button-wrapper"> so the final markup is more like:
<button>
<span class="mat-button-wrapper">
<span>Foo</span>
<mat-icon>keyboard_arrow_down</mat-icon>
</span>
</button>
So far I've got as far as adding the following CSS to make the wrapper fill the available space but I can't see how to progress:
.mat-button-wrapper {
display: inline-block;
width: 100%;
}
.mat-button-wrapper > span {
margin-right: 2em;
}
Stackblitz :-
https://stackblitz.com/edit/angular-material-6z4j4m
button md-icon {
margin-left: 64px;
}
This is more semantically appropriate.
https://stackblitz.com/edit/angular-material-yvqvhm
I was trying to use
.myDivName button:nth-child(2) {
background-color: red;
}
to select my second button in <div class="myDivName"> but it doesn't work. The code I have is -
<div class="myDivName">
<button>
1
</button>
<input type="text">
<button>
2
</button>
</div>
but I found that if I deleted the <input> in between, then nth-child would work.
How can I properly select this button using nth-child(2)? If nth-child cannot be used, what's the best way?
Thanks!
fiddle - https://jsfiddle.net/e6au4hot/9/
Use nth-of-type instead:
.hi > button:nth-of-type(2) {
background-color: red;
}
jsFiddle example
You're concerned with the type of element, not the position in the hierarchy
I have a problem with a button.
I want to fix that gray effect on click but i don't know how to do so.
<div class="col-lg-7 col-sm-5 col-md-11">
<form class="navbar-form">
<div class="input-group">
<input type="text" class="form-control" placeholder="Look for something cool">
<div class="input-group-append">
<button class="btn btn-outline-secondary"><i class="fas fa-search"></i></button>
</div>
add this to your css
button:focus {
box-shadow: none !important;
outline: none !important;
}
PS: it's not recommended to remove it, as it is meant to make the user experience more accessible for people with disabilities or people who are not using touch/mouse as control (for example, if you're trying to navigate to that button using TAB button it will be very hard)
Do you mean the hover? if so create some custom CSS that states:
.btn-outline-secondary:hover{
// YOUR STYLES HERE (the grey comes from the background so...)
background: red (or whatever you want)
}
I think you are referring to the outline of the button when clicked/focused.
here is the CSS you might consider:
.btn:focus {
outline: 0;
}
Here is the detailed answer to your question. Remove blue border from css custom-styled button in Chrome
I'm trying to apply a hover effect to all button tags that have the class dialog-btn. I've tried .dialog-btn:hover{background-color:gold} but that doesn't work. I've also tried other suggestions to similar questions but still no luck. Can someone please clarify how I can do this?
Neither of the two examples below works.
button.dialog-btn:hover {
background-color: gold;
}
<div class="dialog-btns">
<button class="dialog-btn" id="yes">Ref Match</button>
<button class="dialog-btn" id="about">About</button>
</div>
.dialog-btn:hover {
background-color: gold;
}
<div class="dialog-btns">
<button class="dialog-btn" id="yes">Ref Match</button>
<button class="dialog-btn" id="about">About</button>
</div>
EDIT 2:
#yes{
background-color:green;
}
#about{
background-color:purple;
}
The code above appears to overwrite the .dialog-btn:hover code above. Why is that?
Reading your comments, i guess you want to have gold color on all of your buttons if you hover over parrent element.
If it is the case, you can do that
.dialog-btns:hover .dialog-btn{
background-color: gold;
}
I have this button:
<input type="submit" value="#Translator.Translate("PAYOUT")"
class="btn-block secondary-button save-changes padding-8"
ng-disabled="PayoutEnabled==false" ng-click="PayOut()" />
But even when it's disabled it has the same class as it's enabled, just not clickable. I want to change background when it's disabled so that user can see that button, is disabled. How can I do that? Do I need some ng-disabled CSS class or there is some other way?
What Toress answered should work fine but you don't need the help of AngularJS here at all (a native implementation & usage is always best).
You can make use of CSS3 since you already have a class on it. Example:
input.save-changes {
/* some style when the element is active */
}
input.save-changes[disabled] {
/* styles when the element is disabled */
background-color: #ddd;
}
Edit: You can immediately test it on this page of StackOverflow. Just inspect the blue button element and put the disabled attribute and see it's CSS.
.save-changes {
background-color: red;
padding: 7px 13px;
color: white;
border: 1px solid red;
font-weight: bold;
}
.save-changes[disabled] {
background-color: #FF85A1
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="PayoutEnabled = true">
<a href="#" ng-click="PayoutEnabled = !PayoutEnabled">
{{PayoutEnabled ? 'Disable' : 'Enable'}} the below button</a>
<br>
<br>
<input class="save-changes" type="submit" value="PAYOUT" ng-disabled="PayoutEnabled == false" />
</div>
use ng-class
<input type="submit" value="#Translator.Translate("PAYOUT")" class="btn-block
secondary-button save-changes padding-8" ng-disabled="PayoutEnabled==false"
ng-click="PayOut()" ng-class="{'diabled-class': !PayoutEnabled}" />
this will add css class diabled-class to the input when PayoutEnabled is false (!PayoutEnabled is true).
AngularJS adds pseudo-class disabled when ng-disabled is false so i think here is the simplest solution to refer to disabled button :
button:disabled {
color:#717782;
}
In case you are using Bootstrap and a more recent Angular version than AngularJs you can ovverride the default style adding this to the styles.css file
.btn.disabled, .btn:disabled {
opacity: .35 !important;
background-color: gray !important;
}
The higher the opacity the darker or more solid the color will be.