In the material datepicker there is a small arrow for changing the year, I managed to change every component's color in the calendar but not this arrow.
I inspected it in the browser and found a mat-calendar-arrow class but I can only change the background-color of it and not the arrow's color. Is there a possible way to change it to white? I need it for my dark-theme.
Try this out:
.mat-calendar-arrow {
border-top-color: white;
}
Related
I'm trying to figure out how to change the thick light blue border that appears while the mouse button is down when clicking on a pagination number. I have tried border-color on the a element but that doesn't do it.
ul.pagination a.page-link:active {
border-color: #f00;
}
Don't remove outlines (or their visual substitutes). They have an important purpose.
It's actually a box-shadow variable. But just restyle it. Don't remove it.
.page-link:focus {
box-shadow: var(--bs-pagination-focus-box-shadow);
}
You'll want to learn how to use your browser's document inspector to discover what CSS rule is styling an element. You can force states to find :active and :hover styles, for example.
I was trying to style Vaadin grids header, more specifically, I would like to change the background of the 'checkbox' to 'white'.
This changes all checkboxes to white, not just the one in the header.
:host [part="checkbox"] {
background: white;
}
/*or*/
[part="checkbox"] {
background: white;
}
Any suggestions on how I could accomplish that? See the screenshot below: 1) should have white background, 2) should stay with the default background, not white.
Tx.
Did you try the ID CSS selector?
#selectAllCheckbox {
background: white;
}
As I can see on the grid components demo page, the check box is not part of the shadow DOM, i.e. you can style it using global CSS.
I'm to add an angular material spinner, but can't even have the basic one works on Stackblitz. I've added everything the way the documentation suggest, but I'm still getting nowhere.
Thanks for helping
You were missing to define a theme in styles.css. https://stackblitz.com/edit/angular-pbet9b?file=src/styles.css
Or you can also define the stroke color in styles.css:
.mat-progress-spinner circle, .mat-spinner circle {
stroke: red;
}
I would suggest to pre-define a theme and then override in styles.css so in case you forget to define maybe a color at least the default color appears.
I want to remove the background-color effect applying when clicked on tab in angular material:
Here is the link of md-tabs
When I click on the tab, I can see a background-color is applying to the div element:
Here is the screenshot
I tried to over-ride the style with the following code, but not taking into effect:
.md-ripple-container:active{
background-color: none; !important
}
Help!!
Just use the .md-tab.md-active class in css. see the below example.
http://codepen.io/next1/pen/JXbVQN
You can override material styling from your scss/css. Like this:
/deep/ .mat-tab-group.mat-primary mat-tab-label-active{
background-color: red;
}
Due to view encapsulation, you need to use /deep/ selector that will allow you to get hold of the Material class added when the component is rendered.
Im using sifr for the heading of horizontal tabs. When the tab is active it must be blue color and the other tab must be in black color.So how do I switch the tab colors when the tabs are clicked. Please explain
Try adding this to the replace sIFR CSS:
'.sIFR-root {color: #000000; } a { color: #000000;} a:active{ color: #0000FF;}'
Then for your tabs assuming your sIFR selector is p:
<p>YOUR TAB</p>
I assume that the normal state of your tab is black... You can use a:hover for hover, too. For example, if your tab needs to be green when the cursor is hovering over the tab:
a:hover{color:#00FF00}
You might consider using Cufon instead if your text isn't justified... Cufon rocks and I'd use it for everything if only it could be justified... It's very fast and not Flash dependent.
http://cufon.shoqolate.com/generate/