My anchor even after applying CSS styles to it when it's disabled still acts like hyperlink. Changes colour when hovered on.
I've spent some time on this already and almost giving up on this one. I want the magnifying glass to not change colour at all after hovering over it.
This is the anchor
<a href="" class="postcode-search-icon clickable"
ng-click="searchPostcode()" ng-disabled="true" title="Search Postcode">
</a href="">
And my current CSS styles attempt to fix it
.postcode-search-icon[disabled], .postcode-search-icon[disabled]:hover {
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}
What am I doing wrong?
In case you're wondering clickable class is just this so it doesn't matter
.clickable {
cursor: pointer;
}
#edit
Looks like applying color: (original colour) makes a temporary workaround until I find something better.
It seems like your css selector is wrong. The disabled pseudo class only works with input fields and not with anchors.
input[disabled="disabled"], input.disabled {
/* whatever you want */
}
Besides that, idk how you handle the addition of the clickable class, you need to handle that in order to not override styles.
If you are using Angular, you should be able to use a conditional class with the ngClass attribute. Not sure if you are using Angular 2, 3, 4, 5, or JS (here's the JS link for ng-class).
I think I would make the clickable item into a button, as well.
.bright:hover {
color: #0066ff;
cursor: pointer;
}
.dim:hover {
color: #ccc;
cursor: default;
}
<button ng-class="{bright: enabled, dim: disabled}"><i class="search-icon"></i> Search</button>
Related
I am trying to create a button with text inside. I want it so that when you hover over the box, the color of the box changes to white, and the colour of the text changes to blue.
How can I add css to make my text and box change colors on hover?
Edited: I got the html snippet for that from another part of the website template I am editing. It is basically a box that does exactly what I have outline above. I then placed it inside the list tag of the menu html, hoping that it will just transfer the functionality but it didn't work. So I tried to add the [hover:] but it still isn't working.
I know I am doing something wrong but I don't know enough to know what it is.
Code snippet is for html:
Upload resources
Use the :hover pseudo selector
e.g.
button {
color: white;
background: blue;
}
button:hover {
color: blue;
background: white;
}
Of course, replace with the actual hex codes you need rather than the colour names above, and any valid property can be used, e.g. border, text-decoration etc.
Use :hover pseudo selector
element{
color: white;
background: blue;
}
element:hover{
color: blue;
background: white;
}
You can check these at Click Here
I have an 'a' tag that is a normal link to another webpage.
I want to disable the default link appearance unless the mouse cursor is hovering over the link, when the default normal link appearance should be restored.
This is what I have tried so far:
(HTML)
example
(CSS)
a {
color: #000;
text-decoration: none;
}
a:hover {
color: unset;
text-decoration: underline;
}
JS fiddle example of that code here
The problem is that during the mouse hover the link color remains black, and does not unset or restore to the original link blue. Is there a special CSS keyword for "original setting" or something like that?
The value for original setting you're looking for is called initial.
a:hover {
color: initial
}
However, that might make the link black. Which means it wouldn't work for you in this case. You can get around this another way though, through your a style. Use the inverse of :hover using the :not selector.
a:not(:hover){
color: #000;
text-decoration: none;
}
Hi, I'm Link.
The way it works is applying the style to your link, as long as it's not the hover effect. a alone would style the :hover too, which we don't want.
Or if that doesn't work in your environment, you could style the link with the default colors:
a { color: #000; text-decoration: none; }
a:hover {color: #0000EE; text-decoration: underline; }
Hi, I'm Link.
That should work everywhere, as it's a regular color change. However, do note that the default color might slightly vary browser to browser... the perk of this is that the color stays the same across all browsers, I guess.
The difference between the middle and last piece of code is that the middle one uses the default browser settings, while the last one pushes in your own blue.
Right now if i add inactiveLink class to <a> it also affects buttons inside. They cant be clicked anymore. Do i have to make another style activeLink that turns those features back on or is there a way to only affect <a> element without affecting buttons inside?
If there is no other way, what are default cursor and pointer-events for Buttons?
HTML
<a class="text-body selectable-element inactiveLink">
[...]
<button>Click</button>
</a>
CSS
a.inactiveLink {
pointer-events: none;
cursor: default;
}
While the other answer will work (it was deleted as I was typing this), the real question is: If you want the anchor deactivated, should an active button really go inside it?
As the site/app scales, will other developers know what that class does? I think the CSS is fine the way it is, but the HTML could be moved around so those active elements exist outside the inactive anchor (perhaps in a shared parent element). Food for thought!
If you just want the quick fix, add the class "always-active" to the button, and add the following CSS:
.always-active {
cursor: auto;
pointer-events: auto;
}
a.inactiveLink {
pointer-events: none;
cursor: default;
}
button.always-active {
pointer-events: auto;
cursor: auto;
}
<a class="text-body selectable-element inactiveLink">
[...]
<button class="always-active" onClick="alert('it works')">Click</button>
</a>
I'd like to target a button which seems to have the same class as another button. Is there a way to differenciate using css when I can't change the html?
On this page the submit button has disappeared but I think it's because I've hidden a button which shares the same class here
Html:
<button type="submit" class="btn button ur-submit-
button">
<span></span>Submit</button>
I could see common class .btn having following properties:
.btn.btn {
color: transparent! important;
background: transparent! important;
border: none! important;
}
Try adding your class selector which is .ur-submit-button to override hidden property for your class, by adding the following CSS:
button.btn.button.ur-submit-button {
color: initial !important;
/* background: initial !important; */
/* border: initial !important; */
}
It will display the button and then you can further modify its look and feel using same selector.
Although usage of !important is not a good practice, but it seems to be already used by plugin.
I agree with the suggestion by Travis Acton to identify a parent on your create-account page that is different from the homepage. It looks like the form on the create-account page has the class register, which doesn't appear to be used on the homepage. I would try this:
.register .btn.ur-submit-button {
color: black;
}
If you're new to CSS, "parent" just means an HTML element that contains the element you're trying to target.
I know that press signal in css is :active, but i still can't find a proper way to make a toggle switch for the link.
For example, <a> has the color blue, when <a> will be pressed first time, it's color should be red, when it is pressed second time, it's color should blue again. So basically first press is a toggle switch from blue to red, and second is vice versa.
I have used :target action which didn't seem to work out:
a {
color: blue;
}
a:active {
color: red;
}
a:target {
color: red;
}
How could this be possible without use of JS? So i could toggle switch the link color to red on the first click, and then blue again at the second.
You can do it via checkboxes and labels.
HTML:
<input type="checkbox" id="t1" class="toggle">
<label for="t1">Link with toggling color</label>
CSS:
.toggle {
position: absolute;
left: -99em;
}
.toggle:not(:checked) + a {
color: blue;
}
.toggle:checked + a {
color: red;
}
Working example here.
This is not possible to achieve without JS. Links are not designed to be toggle elements, and CSS has nothing to track multiple clicks on an element (it is either being clicked or is not).
If you want to represent a toggle, then look at checkbox inputs instead. They have a :checked pseudo-class.
There is one way you could (sort of) achieve this purely with CSS but it would mean that, in its initial state the link would actually be unclickable, which probably wouldn't be desirable.
The trick is to set the pointer-events of the anchor tag to none, wrap it in another element with a tabindex attribute (to allow it to gain focus) and then, when the wrapping element receives focus, change the colour of the anchor and reset its pointer-events. On the next click, the link will receive focus but this will remove the focus from the wrapping element, which will revert the anchor's styles back to their initial state.
*{color:#000;font-family:sans-serif;outline:0;}
a{
color:#00f;
pointer-events:none;
}
span:focus>a{
color:#f00;
pointer-events:initial;
}
<span tabindex="-1">link</span>