I am trying to use the Checkbox from https://developer.microsoft.com/en-us/fluentui#/controls/web/checkbox.
By default, it will show the check mark when I hover on the checkbox (please see below), whereas I don't want to show that check mark on hover. Is there any props or styles I can set to achieve that?
Paste this in your CSS this will be applied to all the checkboxes in your element.
.ms-Checkbox:not(.is-checked):hover .ms-Checkbox-checkmark{
display:none;
}
In case you want to apply only for a specific checkbox make it a class like this
Inside your CSS
.custom-checkbox:not(.is-checked):hover .ms-Checkbox-checkmark{
display:none;
}
In your react component
[Note] this example is from the Microsoft website you provided
<Checkbox label="Unchecked checkbox (uncontrolled)" onChange={_onChange} className="custom-checkbox" />
Related
In my Angular 6 App I am using kendo multiselect, When I select values from the dropdown, they appear in the multiselect field. But I want to remove the (x)- close icon just for one of the values.
I tried with just css:
#problemWith .k-button:first-child .k-icon.k-i-close {
display: none !important;
}
But this removes the close icon (x) for the very first tile. Is there anyway to apply css based on text!
You may try to remove the :first-child from the css selector
I have a JavaFX button that has been set as Default Button so the user can select it with the Enter key. Currently, it has a blue background:
But I'd like to make it look like a normal button:
I took a look at the JavaFX CSS Guide and it looks like there's only one feature to override (-fx-base).
But changing this feature has unpredictable effects—sometimes it eliminates the button's gradient; sometimes it makes the button transparent.
Is there a simple way to just get rid of the Default Button styling?
My guess is that you are looking in the wrong style sheet. The old default style sheet caspian.css was replaced with modena.css. So setting default value for -fx-base from modena.css should fix the issue:
.button:default {
-fx-base: #ececec;
}
I'm using a button with bootstrap, something like:
I want to disable the style change when the button is hovered or click. I figured I could do this by overriding btn-default:focus or btn:focus but I also have other <a> tags styled as buttons that I would like to keep the effects of click or focus. Is there a way that I could just override the standard bootstrap css in just this case?
add an id to this particular
then add this css
#overrideBS:focus {
//whatever unique properties you want
}
Add your own class myclass, then set myclass:focus with whatever changes your need adding !important at the end of the overridden value.
I am trying to change the editor button (save, cancel) css in Slickgrid. How do I apply a css class to the button item as shown below?
<body>
<div><button>save</button></div>
</body>
I tried to bind the cell double click event to this code:
$("body button").addClass("custom_button");
It was not working because:
the event is called before the button is rendered
all other < div >< button > items are affected.
Thanks in advance!
EDIT:
I can't use tag but class for css styling for some reason.
If you have not used slickgrid before, this button only appears after you double click grid cell.
Give the button an id.
<button id="saveButton">save</button>
That way you can call it directly
$("saveButton").addClass("custom_button");
If you want to style all buttons in the body, you can just use CSS. Put the style from your custom_button class in a CSS selector, put something like this in the head of your page:
<style type="text/css">
body button {
/* styles from custom_button class go here */
}
</style>
just modify slickgrid.editor.js and apply the class.
I'm trying to make an AjaxControlToolkit Accordion control change the header style on mouseover and mouseout. It works fine but when the user mouses over the currently selected header then leaves it the special CSS for selected headers is overwritten by the mouseout class that I've assigned. I'm just using onmouseover="this.className='AccHover'" and onmouseout="this.className='AccMouseOut'" in a <div> tag inside the accordions header sections.
Is there a way to remove the AccHover class on the mouseout event and have it revert back to either the unselected CSS style or the Selected header style depending on the accordion panes state automatically?
I would use:
onmouseover="this.classList.add('AccHover')"
and
onmouseout="this.classList.remove('AccHover')"
EDIT: Ok I just remembered classList doesn't work in IE, I assume that's what you are testing in. In that case I would use something like:
onmouseover="this.className = this.className + ' AccHover';"
and
onmouseout="this.className = this.className.replace('AccHover', '');"
See example http://jsfiddle.net/RgRUN/2/
But I would call your own javascript function rather than write inline.