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/
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.
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;
}
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.
In safari when we tap and hold element, for example input textfield, element highlithing with black translucent color on whole element. I need remove it, I tried -webkit-appereance:none but it doesn't help me. can you help me with this, how i can remove black highlight on focus event?
change
#container {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
Is there anyway to get pointed back button like we have in iphone. Currently I am getting round button.
Also, any one has idea abt navigation bar in jQuery mobile. Whenever we are changing screen using navigation bar css is not getting applied.
Back Button:
You can try this:
http://taitems.tumblr.com/post/7240874402/ios-inspired-jquery-mobile-theme-jquery-mobile
But it will use a background picture instead of pure CSS backgrounds.
If you want to do it pure CSS, this will be tricky.
Start from here. I assign this to an empty div, which gives me a CSS only triangle, which I'm using for popup windows. You would have to find a way to turn this by 90 degrees, match border color to button background gradient and fiddle it into any of the JQM button styles.
Nice challenge :-)
.popover_triangle {
background: none repeat scroll 0 0 red;
border-color: transparent transparent black;
border-style: solid;
border-width: 16px;
font-size: 0;
line-height: 0;
width: 0;
}
If you manage to get it done, please post. There are a lot of people looking for it.