The following code turns the button text a dark color when the button is selected. I assume this comes from code embedded in Bootstrap's btn class. How can I override the code to stop the text from changing color after the button is selected?
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
.buttonColor{
color:#ff0000;
}
.buttonColor:hover{
color:#ffff00;
}
</style>
</head>
<body>
<button class="buttonColor btn" > Submit</button>
</body>
</html>
This is a common question: How to overwrite styling in Twitter Bootstrap, best way to override bootstrap css, the list goes on.
Read up on the CSS law of specifity. Essentially, if you're more specific in your class declaration, you can override others that are targeting the same elements:
In your example:
button.buttonColor.btn {
color: red;
padding: 50px;
}
Will override BootStrap's button.btn declaration.
Similarly, add pseudo selectors to override other states:
button.buttonColor.btn:active, button.buttonColor.btn:hover, etc
Assuming that by "selected" you mean the active state of a button, this is how you achieve it:
.buttonColor:active {
color: #ffff00;
}
Bootstrap uses both the :hover,:active and :focus pseudo-classes to target specific element states:
/* Example of Bootstrap :active styles for buttons */
.btn.active, .btn:active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}
along with :
/* Example of Bootstrap :focus and :hover styles for buttons */
.btn.focus, .btn:focus, .btn:hover {
color: #333;
text-decoration: none;
}
So you'll just need to explicitly override them using your own style :
/* The more specific your selector (e.g. the more accurately it describes an */
/* element, the more likely a style will be applied. */
.btn.buttonColor:active,
.btn.buttonColor.active,
.btn.buttonColor:hover,
.btn.buttonColor:focus {
color: #ffff00!important;
}
or if you want to be more specific, you could explicitly target <button> elements exclusively :
button.btn.buttonColor:active,
button.btn.buttonColor.active,
button.btn.buttonColor:hover,
button.btn.buttonColor:focus {
color: #ffff00!important;
}
Related
I have a Nuxt 2 app and I'd like to create a component with a <style> tag like the following, using CSS properties for styling.
The goal is to define a default CSS property in the component that can be overridden from outside.
However, when I try this method, the default values don't seem to work at all.
<style lang="scss" scoped>
:root {
--default-badge-color: linear-gradient(90deg, #1717ff 0%, #bc29e0 92%);
--default-badge-text-color: #fff;
--default-badge-font-size: 1.6rem;
--default-badge-padding: 0.6rem 1rem;
--default-badge-border-radius: 16px;
}
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--badge-padding, var(--default-badge-padding));
border-radius: var(--badge-border-radius, var(--default-badge-border-radius));
background: var(--badge-color, var(--default-badge-color));
color: var(--badge-text-color, var(--default-badge-text-color));
font-size: var(--badge-font-size, var(--default-badge-font-size));
text-align: center;
}
</style>
Do I have the wrong approach for the syntax?
EDIT: I corrected to padding: var(--badge-padding, var(--default-badge-padding)). But the CSS properties are still not found except I define them inside .badge.
It doesn't really make sense to scope :root, which is intended to select the root of the document with higher specificity than the html selector. That would be like scoping a style for <body>.
Perhaps you're hoping :root was a selector for the current component's root element (like :host is for Shadow DOM), but there's no such pseudo-class in Vue. An alternative is to apply your own class to the component's root element, and use that as a selector:
<template> 👇
<div class="my-root">
<div>...</div>
<div class="badge">...</div>
</div>
</template>
<style scoped>
👇
.my-root {
/* CSS custom properties */
}
.badge {
/* styles using the CSS custom properties above */
}
</style>
On the other hand, if you really are trying to add CSS custom properties to the document root from within <style scoped>, you can use the :global() pseudo-class function on :root:
<style scoped>
:global(:root) {
/* CSS custom properties */
}
.badge {
/* styles using the CSS custom properties above */
}
</style>
demo 1
Or a separate global <style> block just for :root:
<style>
:root {
/* CSS custom properties */
}
</style>
<style scoped>
.badge {
/* styles using the CSS custom properties above */
}
</style>
demo 2
When styling an HTML element like paper-input and disabled a dotted underline style is added.
I can edit the disabled styles like
paper-input {
--paper-input-container-disabled: {
color: black;
opacity: 1;
text-decoration: none;
};
}
But setting the text-decoration does not hide this style.
How can I set the CSS to hide this disabled underline style?
You can add the display: none property to remove the underline.
<style is="custom-style">
:root {
--paper-input-container-underline: {
display: none;
};
}
</style>
Try removing the root if It doesn't work for you.
I found a way to override .sb-show-main by having a storybook.scss as below.
//.storybook/storybook.scss
.sb-show-main {
background-color: green;
padding: 16px;
margin: 20px;
}
Then simply import it into .storybook/preview.js
import "./storybook.scss";
The problem I'm facing and couldn't understand is that, background-color: green do have effect, but padding & margin seems to be ignored. Wondering if anyone ever modifying sb-show-main?
The default value for padding is 1rem, I would like to change it to 20px instead.
The styles you are trying to overwrite may be using the css !important directive, or may be more specific in their targeting of an element. I always try to be specific first, but otherwise I will use !important as a last resort.
.container header ul li p {
color: blue;
}
// OVERWRITE STYLES
p { /* this wont work, because it's not as specific as the original rule */
color: yellow;
}
.container header h1 ul li p { /* try this first */
color: purple;
}
p { /* otherwise use !important as last resort */
color: orange !important;
}
<div class="container">
<header>
<h1>Logo</h1>
<ul>
<li><p>One</p></li>
<li><p>Two</p></li>
<li><p>Three</p></li>
</ul>
</header>
</div
This question already has answers here:
Why doesn't this CSS :not() declaration filter down?
(3 answers)
Closed 4 years ago.
I'm trying to apply :hover only on desktop visitors of a webpage, and :active on the others. I'm setting the mobile class to the body element on the touchscreen devices version, and I put these lines in my css for the buttons in the document (elements with btn class) :
.btn {
background: blue;
color: white;
border-color: white;
}
:not(.mobile) .btn:hover {
background: red;
color: blue;
border-color: black;
}
.mobile .btn:active {
background: red;
color: blue;
border-color: black;
}
Here is an example of how this mobile webpage could be coded :
<html>
<body class="mobile">
<h1>TITLE</h1>
<div class="btn">button</div>
</body>
</html>
The problem is that when browsing on the mobile page, the :hover pseudo-class is still selected even if the button is a child of the body with the mobile class ! Am I incorrectly understanding :not(.mobile) .btn:hover ?
I think it should select any immediate/distant element that has the btn class and is being hovered, and is a child of an element that doesn't have the mobile class...
I also tried others solutions like media queries, but I couln't get them to work as I expected.
The fiddle : https://jsfiddle.net/162tn8ko/
Thank you for reading my bad english
Right now, that selector is matching the html element, with the child of div.btn. To ensure it's a direct child, use >.
.btn, .btn_noborder {
background: blue;
color: white;
border-color: white;
}
/* note the following line */
:not(.mobile) > .btn:hover, :not(.mobile) > .btn_noborder:hover {
background: red;
color: blue;
border-color: black;
}
.mobile .btn_noborder:active, .mobile .btn:active {
background: red;
color: blue;
border-color: black;
}
<html>
<body class="mobile">
<h1>TITLE</h1>
<div class="btn_noborder">button</div>
</body>
</html>
Thank you jhpratt, your answer helped me understand that the :not(s) was indeed applied on the html element. As Temani Afif guessed, in my code the btn is not a direct child of the body ; but here is what I was looking for :
body:not(.mobile) .btn:hover { ... }
complete solution : https://jsfiddle.net/162tn8ko/6/
I want to use my custom style on input[type="submit"] button with jquerymobiles button but it is not working.
My html code is:
<input type="submit" value="Button name">
My css code is:
input[type="submit"]
{
border:1px solid red;
text-decoration:none;
font-family:helvetica;
color:red;
background:url(../images/btn_hover.png) repeat-x;
}
Same style applies when I use following html code:
Button name
jQuery Mobile >= 1.4
Create a custom class, e.g. .custom-btn. Note that to override jQM styles without using !important, CSS hierarchy should be respected. .ui-btn.custom-class or .ui-input-btn.custom-class.
.ui-input-btn.custom-btn {
border:1px solid red;
text-decoration:none;
font-family:helvetica;
color:red;
background:url(img.png) repeat-x;
}
Add a data-wrapper-class to input. The custom class will be added to input wrapping div.
<input type="button" data-wrapper-class="custom-btn">
Demo
jQuery Mobile <= 1.3
Input button is wrapped by a DIV with class ui-btn. You need to select that div and the input[type="submit"]. Using !important is essential to override Jquery Mobile styles.
Demo
div.ui-btn, input[type="submit"] {
border:1px solid red !important;
text-decoration:none !important;
font-family:helvetica !important;
color:red !important;
background:url(../images/btn_hover.png) repeat-x !important;
}
I'm assume you cannot get css working for your button using anchor tag. So you need to override the css styles which are being overwritten by other elements using !important property.
HTML
Button name
CSS
.selected_btn
{
border:1px solid red;
text-decoration:none;
font-family:helvetica;
color:red !important;
background:url('http://www.lessardstephens.com/layout/images/slideshow_big.png') repeat-x;
}
Here is the demo