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.
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'm trying to override the odd/even colors and give the row a ":hover" background color, but I cannot override:
undefined .bwu-datagrid-row.odd,
.bwu-datagrid-row.odd:not([style-scope]):not(.style-scope) {
background: #fafafa;
}
Here is what I've tried on my Theme html with no results :
:host::content .bwu-datagrid-row.odd,
.bwu-datagrid-row.odd {
/* !important works, but it prevents me from doing a :hover */
background-color: lightskyblue;
background: lightskyblue;
}
Adding ":hover" to this last rule doesn't get trigger when the row is moused over. I'm hoping that this is possible, so when someone hovers on any cell in a row, the entire row changes background color.
in package:bwu_datagrid/datagrid/bwu_datagrid_default_them.* is the default theme style module. It is supposed to be used as a template for your own theme.
Create a style module with the same name (<dom-module id='bwu-datagrid-default-theme'>, copy what you want/need from the shipped default theme to your custom theme.
Then only import your custom theme instead of the one from package:bwu_datagrid/datagrid/ and only the styles from your style module will be applied.
This way you don't have to "fight" the default theme.
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/
Is it possible to create a jQueryUI Button with a custom icon, ie: an icon that is not part of the sprite icons that are provided with jQueryUI???
I am using the ButtonSet functionality for a group of 3 checkboxes but need a more stylised icon than what is provided out of the box...
Worked it out with a CSS hack.
Setup the button as per normal and give the primary icon the "Error" class defined below
.Error
{
background-image: url('Images/Icons/16/Error.png') !important;
}
The !important overrides the ui-icon definition for background-image.
I took this approach for one of my buttons and I discovered some interesting things:
I didn't need to use the "!important" override
I needed to set background-position for my button (otherwise I think the background was being displayed well outside the button)
It looks like you can also put anything you like in the jQueryUI primary icon name - it just needs something as a placeholder.
For my uses I ended up with:
Javascript:
jQuery(function() {
jQuery('#share-button').button({
icons: { primary: "icons/share" }
});
});
CSS:
#share-button > span.ui-icon {
background-image: url(icons/share.png);
background-position:0px 3px;}
HTML:
<button id='share-button'>Share</button>