I try to stylizing a Material Checkbox (https://material.angular.io/components/checkbox/overview). There are several things that I have done without problems (like change color, border etc). I would like, but I can't seem to do it, only when the checkbox is unchecked, display the checkmark on hover. As the example on the right in the picture, this to indicate that we can click on the checkbox checkbox-hover
Any ideas ? Thank you !
The checkmark is hidden by setting the SVG path's stroke-dashoffset to ~23px.
In order for the checkmark to be shown on hover you'll want a CSS rule to set this value to 0px and supply a background colour to the checkbox so the checkmark can be seen.
Related
I may not have described the issue accurately with the title, but it's easier to explain here:
I have a button that has an icon image contained within it. I need to get rid of the grey box around that icon and keep the icon itself, along with the button functionality. I assigned the button a second class called "nogray", and in my styling sheet I set opacity to 0.
However, this got rid of the entire button, along with the little orange trash bin icon, which I need to be visible. Essentially, I need the button to function the same way, just with the orange icon and no grey box. In this screenie, you can see the buttons at the top of each bulletin note.
Here is the button code in the bulletin notes view:
<button class ="remove-card nogray" id="#item.BulletinId" type="button"><i
class="fa fa-trash"></i></button>
And here is the css for the button:
i.fa.fa-trash::before {
content: "\f1f8";
}
.remove-card.nogray {
opacity:0;
}
(i.fa.fa-trash::before targets the trash icon, and .remove-card.nogray targets the outer gray area. However, I suspect that the latter is targetting the entire button because setting the opacity to 0 affects both gray area and icon.
How would I tweak the button code so that the opacity is 0 only for the grey, and not the icon? I've tried changing the order of the code element by element, but a lot of it is guesswork because this is a team effort and I did not personally write the button code. I'd also like to apologize in advance if this is an impossible question to answer; if there's some detail you need to know, please tell me and I will edit this to include it.
Thank you very much for any suggestions!
I realized I was targeting the wrong lines of code in my css. There was an ActionLink that a teammate commented out, and I assigned the classes from that to my original button code and was able to target the button that way instead.
I have a jsFiddle that illustrates the problem. I'm using the bootstrap CDN on my site. I've overridden the Bootstrap btn-primary class in CSS in order to make them match my site theme.
The problem: btn-primary has a hover that toggles the icon background color to a shade of blue. But when I click on the button, it seems to 'lock' onto the hover color. It will only change back if I click on the page OUTSIDE of the button.
I know I could just add !important to the background line in my CSS, but then I lose the mouseover/hover color change, which I'd like to preserve.
Can anyone explain why this is happening or give me a fix to allow my overridden button to switch back to its desired/initial color after clicking it and mousing off of it? Thanks.
JsFiddle link
Instructions to repro problem from jsFiddle:
See the issue:
1. mouse over the button without clicking. Color changes for mouse on, changes back on mouse off.
2. Mouse over button
3. Click button.
4. Mouse off button.
5. Notice color of button remains the mouseover color, even if you mouse on/off button repeatedly.
6. click page outside of button.
7. notice button now changes back and mouseover behavior is restored.
Looking for a way to retain default mouseover behavior yet override the default bg color of the bootstrap btn-primary.
I have custom text input CSS on my site, which causes the boxes to be all white when selected and grey when not in focus, as you can see here:
In the second picture, Google Chrome automatically fills in my username and password as I have it saved, and it highlights the inside of the box (not the border) a pale yellow. Is there some sort of CSS selector to override this event, or some better way to do it? Is there a way I can make my border highlight as well?
Try using background-color: white !important; which should override Chrome's autofill, unless Chrome is programmed to override everything, in which you can't do anything about it.
Is it possible to customize the arrow background color of the dropdown using css/css3.
When the border color is default only black arrow seems to be visible.
on apply of border color arrow appears as shown in image
Not interested to open/close div accordingly. looking for some styling to achieve.
The real answer is no. The browsers do not let you change the appearance of those kind of elements, like checkboxes, radio buttons, dropdowns, etc.
However, there are jQuery plugins out there that let you fake it thinking what you see is an authentic dropdown, but in reality it's something else, like an unordered list with a container div that resizes and contracts when you click on it.
This is a CSS-Question.
In this fiddle you can see a button.
It has got two span-elements inside. One with float:left; the other with float:right;.
The style is a normal button-style.
When clicking that button on the iPhone or hover it in a Browser the style gets lost.
This is because I changed the background-color.
Is there a way to change the background-color without losing the whole button-style?
EDIT:
Here are the two images: The first button is a normal button-element. The second button is a button where I changed the background-color ... this is what it looks like when I'm hovering over a button.
I think I understand what you mean. It looks like the rounded corner is gone when hovering, while a border is added. I'm afraid there's not a easy way to get what exactly you want, as the behavior & appearance of Button is controled by system.
Maybe you can try to replace it with a div, which you have full control of the style (chaning the style via JS when hovering).
All's working fine for me. However floating-right elements should always be placed before floating-left elements. Don't know if it will change anything.