I have some button styling, which applies when the button has the disabled attribute.
However, I also have a .loading class that I'd like to apply to buttons.
I want the disabled styling to apply only if the button does not have the loading class.
Please see my JS Fiddle: https://jsfiddle.net/pbcykx5L/
I'm imagining something like this, but it doesn't work. Is there a way of doing this?
.btn:not(.loading):disabled {
background-color: #cdd9c3;
border-color: #cdd9c3;
text-shadow: none;
cursor: not-allowed;
}
It does work. In your fiddle, there is no difference in the styles being applied to .btn:not(.loading):disabled and .btn:disabled. If you change the background color of one to red, you can see the CSS is being properly applied.
.btn:disabled {
background-color: #cdd9c3;
}
.btn:not(.loading):disabled {
background-color: red;
}
<button class="btn">Button</button>
<button class="btn" disabled>Button (disabled)</button>
<button class="btn loading" disabled>Button (disabled and loading)</button>
Related
I want to hide the drop down arrow and button color, I'm using vue-bootstrap. is there any other method that I can use to make a drop down in my navbar without arrow and button color? I already tried a lot of method but it seems like every styling that I do is not working on vue-bootstrap
<b-dropdown
id="dropdown-left"
text="RECIPE"
ref="dropdown"
class="m-md-2">
<b-dropdown-item>A</b-dropdown-item>
<b-dropdown-item>B</b-dropdown-item>
</b-dropdown>
And There is source of package:dropdown-bootstrap
Just use no-caret prop to hide the arrow/caret:
<b-dropdown no-caret>
<!-- your content here -->
</b-dropdown>
Use toggle-class to style your dropdown button toggle:
<b-dropdown variant="link" toggle-class="my-custom-toggle" no-caret>
<!-- your content here -->
</b-dropdown>
.my-custom-toggle {
color: black;
text-decoration: none;
}
toggle-class prop could be an Array, Object or String. Similar to :class bind in vue.js
Check all <b-dropdown /> properties here --> https://bootstrap-vue.org/docs/components/dropdown#comp-ref-b-dropdown-props
You gotta override the style of the default classes responsible for what you see in the dropdown component, I don't know whether you want to change the dropdown permanently in the app or is it in just one case so either you give your dropdown a class name & use this styles or simply override the default classes in your stylesheet like this:
.btn-secondary { /* this is the button's class */
color: #000;
background-color: transparent;
border-color: transparent;
}
.dropdown-toggle::after{ /*this is responsible for the arrow you see in the button*/
display:none;
}
.btn-secondary.focus, .btn-secondary:focus, .btn-secondary:hover { /* this will change the button's hover & focus effect*/
color: #000;
background-color: #e7e7e7; /*just assumed you want it to be colored on hover IDK */
}
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle { /*and apparently this is responsible for when the button is active*/
color: #000;
background-color: #e7e7e7;
}
So I'm using a button component from MDBootrap. To be specific I'm using an Outline Button Component which looks like this:
The code that's given on the website for this particular component is as follows:
<button type="button" class="btn btn-outline-warning">Warning</button>
I was wondering if there's a way around to change the font color as well as the border color of this button component since at the moment it's not matching well with the theme of my website. Thanks!
If you want to reuse styles, create a new css class:
.btn.my-cusomized-button {
border-color: pink;
color: pink;
background-color: transparent;
border: 1px solid pink;
}
<button
type="button"
class="btn my-cusomized-button"
>
Primary
</button>
n.b. css class my-cusomized-button and pink as color are just an example. Use your colors and class which better suits your need
I would like to set custom icon (ionicons) size for this code:
<button class="button button-icon icon ion-stop customIconSound"></button>
For class customIconSound i tried following:
button.customIconSound,button.button-icon {
font-size: 52px !important;
color: #fff;
line-height: 55px!important;
}
But without luck. If i tried icon class without the button button-icon class i fount that it is working but without button class icons has not pressed state (because is it not a button).
How can i solve it please?
Thanks for any advice.
Lucas was close but the correct syntax is this one
button.customIconSound:before {
font-size: 22px !important;
}
If you didn`t solve your problem yet or for people dealing with it in future.
You have to change css style for i pseudo element :before
button.customIconSound i:before {
font-size: 52px !important;
}
Your example is working here.
Maybe your problem is caused by something else.
PS: If you want only to resize the icon this css line is enough.
.customIconSound {
font-size: 52px;
}
Try ruling button-icon class out. That css class was the trouble in my case. Likewise, as a result, css styles worked on button tag too. For example:
<button class="button button-clear ion-edit" style="color:#fff; font-size:22px"></button>
Is it somehow possible to give the button a opacity property like the form?
Because I want to make the button "invisible", but clickable.
Although I'm not sure why you would want to do that, I think this might work:
<button class = "hide">My Button</button>
for the styling:
.hide{
opacity: 0;
background: none;
border: none;
}
I am assuming this is html...
I have a custom button implemented as an anchor. The button has an image and text.
When the button has focus, I would like to style it differently. Specifically, I would like to draw a dotted rectangle around the image and text. I would also would like to additionally style it based on another class.
Here's the button code:
<a id="searchButton" class="button" href="#">
<span class="icon-search"></span>
Search
</a>
Here's the CSS code with my questions:
button:focus {
/*How do I make a rectangular dotted line around the button text and icon? /*
/* How do I refer to another class that has additional stylings? */
}
You have "button" but it should be ".button" instead since your tag is not a button, but rather your class.
.button:focus {
outline: #00FF00 dotted thick;
}
In regards to the question, "How do I refer to another class that has additional stylings?", I believe you would need a library like SASS, LESS or some other dynamic stylesheet language because that type of functionality is not currently supported by CSS natively.
You refer to a class by prefixing it with a dot (.), like so:
.button { /* styles go here */ }
You can achieve the desired effect with outline: 1px dotted gray;
.button:focus {
outline: 1px dotted gray;
}