I'm trying to overwrite the default CSS in an Angular Kendo grid to display hyperlinks in a specific way. Pretty basic, I want hyperlinks to display as blue and then hover with an underline, but I don't want this style applied to the headers. I'm trying to use the 'not' selector, but it's still displaying in the headers.
.k-grid a:not(.k-grid-header) {
color: $royal-blue !important;
}
.k-grid a:hover:not(.k-grid-header) {
color: $dark-blue !important;
text-decoration: underline;
}
Related
I'm styling the selected text in my document using the ::selection pseudo class.
div::selection {
color: white;
background-color: red;
}
span {
color:white;
background-color: red;
}
<div>Selected styled.</div>
Selected regular.
<span>Not Selected.</span>
When I select the styled text, the red is very visibly not the same color as regular red. It has a blue-ish overlay. This seems to be some sort of interaction between the default selection styles of the browser and my own styles.
How can I completely remove the browsers styling while keeping my own?
I've tried using user-select: none; in the html style, but that completely overrides all selection.
EDIT: I've just run this is firefox and it's fine, so this appears to be a Chrome specific issue.
EDIT: Here is a screenshot of what I see when selecting:
I'm using Google Chrome Version 74.0.3729.131 on a Mac.
First time post, bit of a n00b...
Working on a WordPress site for a client. The following piece of CSS is used to style all hyperlinks within the post_content section of a page a dark blue color (#2a5db0).
section.post_content a {
color: #2a5db0;
}
a:hover {
color: #2a5db0;
text-decoration: underline;
}
However, buttons on the site are also styled to a dark blue color, making any button hyperlinks almost unreadable.
Essentially I want to exclude any hyperlinks enclosed within <button> tags from the above rule. What piece of CSS can I write to ensure that hyperlink text on buttons is displayed in white (#fff) but all other hyperlinks within the post_content section are styled #2a5db0 as per the above rule?
Thanks!
Though slow, this should work:
section.post_content *:not(button) > a {
color: #2a5db0;
}
But your last paragraph seems to suggest that you want this:
section.post_content a {
color: #2a5db0;
}
section.post_content button > a {
color: white;
}
You can target hyperlinks within a button tag like so:
This will target links within a button tag:
section.post_content button > a {
color: #fff;
}
Or
This will target the button text colour:
section.post_content button {
color: #fff;
}
I'm trying to format the kendoui panelbar text only, not the content inside the container.
/* kendo overrides */
.k-panelbar .k-link
{
font-size:larger;
font-weight:700;
text-decoration: underline;
}
The code above leaves the content in the panel intact, and formats the text in the panel bar with all but the text-decoration option.
text-decoration (tried text-decoration-color as well) doesn't work unless I use .k-item, but k.item affects the content in the panel as well.
/* kendo overrides */
.k-panelbar .k-item
{
font-size:larger;
font-weight:700;
text-decoration: underline;
}
How do I change only the text in the panelbar itself?
Please try with the below code snippet.
.k-panelbar>.k-item>.k-link {
color: red !important;
text-decoration: underline !important;
}
You want to change apply style only to panelbar header.
Let me know if I am not understand your requirement.
Not sure what I did last night but now I get up this morning and chrome seems to be overriding my anchor and input styles. I wish there was a snippet of code I could post here but I have no idea what code could possibly be causing it. i don't want to put !mportant all over the place to fix it so I am hoping someone can look at the test site and figure out what chrome doesn't like.
The headerWidgets at the top of the page (email, phone, and search) should not have decoration and should change color on hover. I can't even place the cursor in the search input anymore. And the nav menu shouldn't have decoration, but the hover works. Go figure. chrome dev tools shows me this:
a:-webkit-any-link { user agent stylesheet
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
and a bunch of user style sheet entries for input
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
is the default styles of webkit for the a tag.
Add a css selector #email a,#phone a and put the styles you want inside. Like this:
#email a,#phone a{
text-decoration:none;
}
and for the hover:
#email a:hover,#phone a:hover{
color:red;
}
A better selector to target all anchor tags inside #headerWidgets
#headerWidgets a {
color: #F00;
}
#headerWidgets a:hvoer {
color: #CCC;
}
And the reason why you cant click on your search box anymore is that div#headerMenuWrapper is blocking the way. On dev tools hover on this element <div id="headerMenuWrapper" class="clearfix"> you will see it covering #headerWidgets
I want my links*** to change color when clicked, but also change color when hovered over.
I got a javascript function to change the color when clicked, but it requires inline CSS which is keeping my style sheet's hover from working.
Is there a way to have the inline CSS and CSS stylesheet not cancel out? Or is there another way to change the color of the link when clicked that wont cancel out the hover color?
*(These links are being used to show a hidden div using javascript)
script:
function toggle_link(select){
var color = select.style.color;
select.style.color = (color == "white" ? "yellow" : "white");
}
html:
<div id="gdtitle">
<a class="port" href="#" onclick="toggle('gdhide');toggle_link(this);" style="color:white">Graphic Design</a>
</div>
css style sheet
a.port{
text-decoration: none;
color: white;
}
a.port:hover{
text-decoration: none;
color: yellow;
}
You could use !important to override inline css
Better yet, don't but alter the behaviour of your toggle_link - would you rather add a class to the element and style it instead?
Use the :link, :visited, and :active pseudo-classes on the <a>.
CSS:
a.port, a.port:link, a.port:visited, a.port:active {
text-decoration: none;
color: white;
}