I have a very limited space around the mat-radio-button element so I wanted to disable it. It is half disabled but, on hover action, it's "ghost" continues to show on hoverlike below;
This is my mat-radio-button;
<mat-radio-button [disableRipple]="true" [checked]="element == expandedElement"(change)="ShowDetail(element)" ></mat-radio-button>
And to be clear, [disableRipple] disables the effect that shows on onclick but not the effect on hover. Anybody have a solution that might help me?
This is what I've tried but doesn't work which is located at the styles.css of the component (When doing document.querySelectorAll() this gives the ghost part);
span.mat-ripple-element.mat-radio-persistent-ripple{
display: none !important;
}
Stakblitz that shows disableRipple only removes the ripple that is shown on onlick event : example (Auto is the one with disableRipple attribute)
To remove the ripple effect you can just add the following to your styles.scss file:
.mat-radio-ripple {
display: none;
}
As you can see here: https://stackblitz.com/edit/angular-ehgpd2-2hvt7s?file=src/styles.scss
This removes the ripple to the material radio buttons.
To remove it for all mat elements you can just do:
.mat-ripple { display: none; }
To remove if just for checkboxes:
.mat-checkbox-ripple { display: none; }
etc...
As you can see here: https://github.com/angular/components/issues/17404
(Also please note that as mentioned in the guthub issue the ripples on focus/click are there for accessibility, that's the reason why they're difficult to get rid of, I think you should keep that in mind and do something on a mat radio that if active or has focus)
To remove the background color on hover. Add below css in your style.css/style.scss file.
.mat-radio-container:hover .mat-radio-persistent-ripple {
opacity: 0 !important;
}
Related
I've been looking for a way to easily style checkboxes even in those cases where I don't have labels but I haven't found any answer that completely satisfied me so I decided to try and find a way by myself so that all the others might find it useful.
This is what I ended up with.
CSS Checkbox without label
What I do is basically style the after elements and set pointer-events to none so you'll be able to click true the after element.
This allows us to let the checkbox handle the click and change its state from checked to unchecked and we'll then style the after element depending on the checkbox state.
This will be the unchecked style
.check:after{
pointer-events: none;
background: white;
content: ...
....
}
And then we'll have our checked style
.check:checked:after{
background: green; /* Change background and maybe image */
....
}
Please notice that the original checkbox will be still visible under the after element since we can't hide it (hiding it will end up hiding after and before elements too) so you can't play with transparency on your after element but you can still play with background image position and background color as I did in the example.
I hope this will help you with your styles! :)
I'm new at website programming and I'm currently using Bootstrap, but I'm struggling with a problem that I just can't fix.
I have a navbar where one of the links open a modal, but when the modal closes, then there is a blue outline around the link in the navbar.
is it possible to remove this blue box? I just can't find the styling, that causes it?
That blue outline exists for accessibility. It helps people navigate through the links and tabs. Most people would recommend that you don't remove it.
You haven't posted your code (a requirement on this website), so I don't know exactly which element needs styling, but this is the code you would add to that element:
:focus {
outline: 0;
}
As Jdsfighter stated, you could also add this to your stylesheet to remove the outline from every element.
*:focus {
outline: 0;
}
Just in case someone bump into this like I did. In Bootstrap >5 it's box-shadow:
:focus {
box-shadow: none;
}
So, whenever I click on my button, this happens:
Is there any way to prevent this?
Thanks guys. :)
Answered already (probably many times, but here's one example): https://stackoverflow.com/a/3397158/839847
Quoted here for convenience:
This border is used to show that the element is focused (i.e. you can
type in the input or press the button with Enter). You can remove it,
though:
textarea:focus, input:focus{
outline: 0;
}
You may want to add some other way for users to know what element has
keyboard focus though for usability.
Chrome will also apply highlighting to other elements such as DIV's
used as modals. To prevent the highlight on those and all other
elements as well, you can do:
*:focus {
outline: 0;
}
Think you keeping your button inside <a> tag. If so use this code
a #btnid
{
border:none;
}
panelMain.setBackground(Color.WHITE);
Button.setBackground(Color.WHITE);
Adding this to your JFrame inherited class constructor will resolve the issue. The color does not have to be white, you can set it anything, just make sure the panel and button are of the same color. and please don't trust my answer too much because I too am a beginner
To make this work for me in Chrome in 2021 I added this to my Site.css file:
.btn,
.btn:focus,
.btn:active,
.btn:hover {
border: 0 !important;
outline: 0 !important;
}
I came across this very neat annotation overlay effect: http://tympanus.net/codrops/2012/05/14/annotation-overlay-effect-with-css3/
You can see a live demo here: http://tympanus.net/Tutorials/CSS3AnnotationOverlayEffect/ (you will need to click on the picture there to see the effect)
I am trying to make the text within annotation <span> clickable with some external link, like:
<span>Easy Theme Options</span>
but it doesn't work... whenever I click on the annotation, it transitions back to full size image.
I appreciate any help, thank you!
I made it work, as you see in this Fiddle.
The problem is that the checkbox is always over the spans. And because all the checkbox and the spans are positioned absolute, changing the z-index wouldn't work! The only way I found it to work with only CSS (by not changing to much) is by messing with the pointer-events property and the <div class="ao-annotations">'s z-index. (z-index is layered within an element. Because the annotations <div> and the checkbox are both in <div class="ao-preview">, changing the <span> z-index wouldn't work.
I did the following:
I set the z-index of the div.ao-annotations higher than the input.ao-toggle. This results to not being able to click on the input, so not being able to toggle.
To solve this I added pointer-events: none to the <div class="ao-annotations">. Now the result is the same, but the <span>s are now positioned on top of the input.
To be able to click on the <span>s I added this CSS:
input.ao-toggle:checked ~ .ao-annotations span{
pointer-events: auto;
}
This results to only being able to click on the <span>s when the checkbox is checked.
Summary:
.ao-annotations {
z-index: 20;
pointer-events: none;
}
input.ao-toggle {
z-index: 10;
}
input.ao-toggle:checked ~ .ao-annotations span{
pointer-events: auto;
}
I am very sad to say this only works in IE11 (and all the other browsers)... So you'd probably have to 'hack' with Javascript or rebuild the HTML / CSS.
I hope you can build on this!
It's just a simple question. I made a button using <a> with background image. It should use different image when it is clicked. I use :active property in its css. But the thing is even after the button is not pressed (release), the :active class is still there. So it is still using the image for the status.
How come? And how I should do it, when I only want to apply the class when the button is pressed?
Thank you. I hope I have explained it well enough.
catwoman, if you just want it while pressed active should work. if you're looking for toggle, then you need what's below.
CSS doesn't have a selector that toggles, except for :checked on checked inputs.
You need Javascript:
<a href="#" onclick="toggle_class('foo');"
or to use jQuery Toggle: http://api.jquery.com/toggle/
--
then again, if you are actually looking for button pressed, active should work. paste your code here and we can check it out. if you're doing something that can't be performed solely with css :active pseudoclass, look at the mousedown event: http://api.jquery.com/mousedown/
works fine for me: Demo
button {
background-color: blue;
border: none;
color: #FFF;
}
button:hover {
background-color: green
}
button:active {
background-color: red
}
Can you provide a Demo to have a look in to it?