when I click on a Bootstrap button, a csss is applied while the mouse button is clicked. This is also visible when the mouse button is hold pressed over a bootstrap button.
I need to change that style, but I can't find it using inspect element. How can I find what style is applied and how can I change it?
I had this problem the other week. If you're using chrome, open inspect element, code highlight the button, right click, select Force Element State, select :focus. This will show you the CSS code that you need to alter.
Having an issue with this myself until I applied the style to .btn-default:active:focus
Related
I need to prevent the check of a checkbox by clicking on its label.
I use the angular material checkbox.
I partially manage to do it using the preventDefault() method but the checkbox still shows focus style if I click on the label.
What I need is: if I click on the label, nothing should happen to the checkbox (not checked, not focused on).
Please take a look at this stackblitz link to better understand my issue: https://stackblitz.com/edit/angular-2zyvdp?file=src%2Fapp%2Fcheckbox-overview-example.html
If you don't want to change ripple behavior or CSS, try this:
<span (mousedown)="$event.stopPropagation()" (click)="check($event)">
Check me!
</span>
The ripple effect is triggered from the mousedown event (hence why you don't see them when using the space bar), and you need to use stopPropagation(), as preventDefault() isn't enough here.
StackBlitz link here
Add below css in style.css & check
span.mat-ripple.mat-checkbox-ripple.mat-focus-indicator {background: none !important;opacity: 0 !important;}
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 want my application's buttons to be green only when I hover over them. Currently, they are green after I click one of them, until I click something else.
For instance, this button is green after clicking on it and before clicking somewhere else.
What's the name of this effect?
I am now looking over my css files, trying to find this effect and replace it with hover so that the buttons are green only when I hover over them.
My guess is that it is applying the style to the :focus pseudo-class.
The :focus CSS pseudo-class is applied when an element has received
focus, either from the user selecting it with the use of a keyboard or
by activating with the mouse (e.g. a form input).
Alternately, the style might be applied by JavaScript in response to click/focus events, either directly to the element, or by adding a class to the element.
As mentioned in the comments by #AdrianoRepetti, use dev tools to help identify how the style is being applied.
I may be trying to get too fancy on this one.
I have a pair of radio-like buttons in a row with a divider between them with background images. When one of the 'buttons' is clicked, I change its class. The CSS for the divider is keyed to the classes of the buttons on either side to select a background image. I am doing this with CSS 'sibling' selectors.
I have jQuery .click events tied to the 'buttons'. the first thing they do is clear the 'selected' class from the other button and set it on the button that was clicked.
For example, if the LEFT button class='selected' and the RIGHT button is not, the divider between them will get a blue background. Click on the RIGHT button and it gets class='selected' while the LEFT button's class is cleared. The divider turns red.
This works in IE, FF, Safari, etc. But IE is odd (IE7) - it will only reflect the divider background change when I mouse OFF the button I clicked! That is, in the example, the RIGHT button gets class='selected' and changes immediately on the click. But the divider stays blue until I mouse off the button, then it turns red.
The class itself IS changing and the button's appearance changes as a result. It's only the neighboring stuff that doesn't!?
It reminds me of my old VB6 days when you had to periodically call 'DoEvents' to get Windows to make UI changes. Could there be something similar here for IE?
I have no idea why this helps, but adding .hide().show() to a selector that includes the stuff that changed class seems to make it update.
I've read that using setAttribute to change the class will force IE7 to re-render the styles. Try that, and if it still fails, I've solved a similar IE7 problem by rewriting the html, which forced IE7 to re-render (using jquery):
if ($("html").hasClass("ie7")){
var tempHolder = $("#ajaxresults").html();
$("#ajaxresults").html(tempHolder);
}
As for giving the html or body tag the ie7 class, I recommend taking a look at html5boilerplate.com. If for some reason you can't use their solution, the jquery for it is:
if ($.browser.msie){
if ($.browser.version < 8){
$("html").addClass("ie ie7");
}
else {
$("html").addClass("ie");
}
}
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.