I'm using a Bootstrap button group and having an issue overriding some CSS states. I believe the state is :active:focus that is adding a dark blue background to the button while it is in the act of being clicked, which I've tried overriding with no success.
I've provided a Fiddle replicating the issue I'm experiencing.
Attempting to override this style with:
.btn-group label.btn-primary:active:focus {
background-color: #ffffff;
}
Any suggestions?
You cant chain those states together like that:
do them separately:
.btn-group label.btn-primary:active {
background-color: #ffffff;
}
.btn-group label.btn-focus{
background-color: #ffffff;
}
(btw i think you might want transparent and not #ffffff
https://jsfiddle.net/jer8k6ex/4/
Related
I am trying to create a button with text inside. I want it so that when you hover over the box, the color of the box changes to white, and the colour of the text changes to blue.
How can I add css to make my text and box change colors on hover?
Edited: I got the html snippet for that from another part of the website template I am editing. It is basically a box that does exactly what I have outline above. I then placed it inside the list tag of the menu html, hoping that it will just transfer the functionality but it didn't work. So I tried to add the [hover:] but it still isn't working.
I know I am doing something wrong but I don't know enough to know what it is.
Code snippet is for html:
Upload resources
Use the :hover pseudo selector
e.g.
button {
color: white;
background: blue;
}
button:hover {
color: blue;
background: white;
}
Of course, replace with the actual hex codes you need rather than the colour names above, and any valid property can be used, e.g. border, text-decoration etc.
Use :hover pseudo selector
element{
color: white;
background: blue;
}
element:hover{
color: blue;
background: white;
}
You can check these at Click Here
if you go here and add "Piept de pui la gratar" to your cart, there will be a popup.
I tried modifying the close button's CSS because I want it fully yellow (including hover and non-hover states), but it just doesn't seem to work.
I've tried setting the color and background-color. The background color seems to work, but I don't want to change it. Setting the color to yellow just doesn't seem to make it. Any help is appreciated.
CSS Code:-
a#thp-close-id {
color:yellow;
background-color: yellow;
}
Also tried:-
.thp-close {
color: yellow;
background-color: yellow;
}
I also tried flagging the color property as !important, but it didn't work.
The reason why it doesn't work, it's because you are trying to apply those styles to the wrong 'element', as the close button uses its pseudo classes, see screen:
So in order to achieve what you need, try writing this css instead:
.thp-close:before,
.thp-close:after {
background-color: #f4c001;
}
I'd like to target a button which seems to have the same class as another button. Is there a way to differenciate using css when I can't change the html?
On this page the submit button has disappeared but I think it's because I've hidden a button which shares the same class here
Html:
<button type="submit" class="btn button ur-submit-
button">
<span></span>Submit</button>
I could see common class .btn having following properties:
.btn.btn {
color: transparent! important;
background: transparent! important;
border: none! important;
}
Try adding your class selector which is .ur-submit-button to override hidden property for your class, by adding the following CSS:
button.btn.button.ur-submit-button {
color: initial !important;
/* background: initial !important; */
/* border: initial !important; */
}
It will display the button and then you can further modify its look and feel using same selector.
Although usage of !important is not a good practice, but it seems to be already used by plugin.
I agree with the suggestion by Travis Acton to identify a parent on your create-account page that is different from the homepage. It looks like the form on the create-account page has the class register, which doesn't appear to be used on the homepage. I would try this:
.register .btn.ur-submit-button {
color: black;
}
If you're new to CSS, "parent" just means an HTML element that contains the element you're trying to target.
This is how my code looks like on CodePen:
I want the background of "Sidenav Left" to be that of "Menu Items", which is represented by class as
.nav-theme {
background-color: #34495E
}
I tried overriding it as
.nav-theme, .md-theme-indigo {
background-color: #34495E
}
but that did not work, what do I need to do?
Be more specific in your CSS selection to override. Since the below selectors are more specific, their priority will be higher than the default background color that was not getting overridden before. In this way you are avoiding the usage of !important
.md-sidenav-left .md-theme-indigo, .md-sidenav-left .nav-theme {
background-color: #34495e;
}
CodePen Demo
You can use the md-colors directive to set it to a color from your color palette. That way it'll change automatically if you pick a different theme.
<md-toolbar md-colors="::{background: '{{theme}}-primary-700'}"
I've got a common button set in my css. Also 've got a hover set to it.
.myBtn {
background-color: #f60;
border: none;
font-size: 12px;
}
.myBtn:hover {
background-color: #fff;
}
.myBtn is mostly on a black background, so the button is visible on hover state. But when .myBtn is on a white background, the button disappears because .myBtn hover color and the page background colour are the same.
My question is it possible to use .myBtn for all buttons create 2 different hover states?
e.g.:
.myBtn:hover1 {
background-color: #fff;
}
.myBtn:hover2 {
background-color: #000;
}
No, two hovers on one class won't work. Also when you declare two after each other, the stylesheet will be read cascade, so only the last will apply.
A possible solution would be to add an extra class.
.myBtn {
background-color: #f60;
border: none;
font-size: 12px;
}
.myBtn:hover {
background-color: #fff;
}
.myBtn.onWhite:hover {
background-color: #000;
}
Then you'll only need to add an extra class on the buttons on a light background <button class="myBtn onWhite">.
It is not possible to create 2 hover effects for a same class. You can either use a different class and provide hover to that or use jQuery to provide that effect.
In what way do you change the background color? By hard coding your background-color? Or it's already written in two classes that when you trigger something, the html code will change the class name and thus the background?
If it's hard code I'm afraid you have to hard code the Btn class as well. But if it's triggered by something you can have another Btn class name and will be triggered together with background color.