So I'm using ant.design to create my navbar. Initially, ant's menu items have a underline when either selected or hovered upon (this underline is a blue-ish border-bottom). I now want to change this underline's color to suit the rest of my design. I managed to change the bar's color when selected by targeting a specific class like this:
&& .ant-menu-item-selected::after{
border-bottom: 2px solid #659e38 !important;
}
However, I want the color changed also when hovered upon, but when I target the menu item like this:
&& .ant-menu-item:hover{
border-bottom: 2px solid #659e38 !important;
}
I get a undesired result of:
How can I get what I want? Note that I'm using styled.components for styling.
The solution was to change:
&& .ant-menu-item:hover{
border-bottom: 2px solid #659e38 !important;
}
to:
&& .ant-menu-item:hover::after{
border-bottom: 2px solid #659e38 !important;
}
this is (I believe) due to bar's being created as a pseudoelement by ant.d.
Related
I am using angular and devExpress to build this component.
<dx-text-box ...
label="Link"
labelMode="floating"
>
</dx-text-box>
I want to change the default border(color & size) and when clicking or hovering the input field.
What I want:
(normal, hover and disable state)
I have this css-classes
::ng-deep .dx-texteditor-label > div {
border-color: blue !important
}
::ng-deep .dx-state-focused .dx-texteditor-label > div {
border: 2px solid red !important; /* did not work, why*/
}
::ng-deep .dx-label {
color: purple
}
When I change only the background-color It works fine, but when using the border: 2px solid red property It is broken.
What I'm getting:
Why is this so?
Hello I am trying to remove the default background of toolbar icons when hover in firefox using userChrome.css
.toolbarbutton-icon
{
border-radius: 5px !important;
box-shadow: 0px 1px 1px 1px black, 0 -0.01em 1px 0px #D0D0D0 !important;
background-color: var(--uc-regular-colour) !important;
width: 26px !important;
height: 26px !important;
padding: 5px !important;
}
This block of code changes the size and color of all toolbar buttons including extension icons
Then I used this block of code to change its color when hover over them
*:hover > .toolbarbutton-icon{
background-color: green !important;
}
Which changes color of buttons when hover but the extension buttons stays the same.
How can I change it without having to define each extension name or property
Below are some screenshots to demonstrate the issue
As you can see except extension button all buttons change color
*:hover .toolbarbutton-icon {
background-color: green !important;
}
Tried this block as well as suggested below, but it hovers on all icons by default, I want each button to change color when hovered over them also when I hover over the extension button It still has the gray color
It will be a problem when you use >.
The > notation applies only to the immediate children of that element.
Try use:
*:hover .toolbarbutton-icon {
background-color: green !important;
}
Hope this helps.
.webextension-browser-action:hover > .toolbarbutton-badge-stack .toolbarbutton-icon { background-color: var(--uc-hover-colour) !important;}
Apparently after doing some research. Finally found a way to fix it.
The block of codes only works with extensions installed on firefox
If you click on that image (which is inside a button) an Alertify message pops up. This (the image above) happens when the message closes.
I have this problem wherein the button defaults back to the default button decoration. How do I prevent this from happening? I already tried the outline: none !important CSS element but it still does not work. Is there an "aggressive" way of getting rid of this?
EDIT: I have double-checked on the developer tools already and it seems that the outline CSS code has already applied. However, this problem still persist.
If you are trying to remove the background blue and the border. Try the following styles..
These will add a 1px wide transparent border which will change color to grey when clicked. It will turn back to transparent when click is released.
Also the background blue color will be removed.
button, button:focus{
outline: none;
background: transparent;
border: 1px solid transparent;
}
button:active{
outline: none;
background: transparent;
border: 1px solid grey;
}
I have an anchor element that I want to draw a border around when the cursor hovers over it. The problem is that the anchor text and everything to its right "jumps" slightly to the right when the border is drawn.
I thought I'd be clever and style the anchor with a border of the background color (via "inherit") so that a default border is drawn when there is no hover. Then, when the user hovers, the red border is simply drawn over the background border and the text should not jump to the right. But this approach does not work.
The main reason I am posting is to understand why my strategy of using the inherited color to draw the border does not work. In other words, why is it that a border of the inherited color is not drawn? Secondarily, I would like to know how to prevent the text from jumping.
Here are the styles and a JSFiddle: https://jsfiddle.net/tlbaxter99/zoLr4m8j/6/
a:link, a:visited {
border: 1px solid inherit;
}
a:hover {
border: 1px solid red;
}
The main reason I am posting is to understand why my strategy of using the inherited color to draw the border does not work. In other words, why is it that a border of the inherited color is not drawn?
It's not working because 1px solid inherit is an invalid value:
According to MDN, you can't use the inherit value as part of a shorthand declaration (like in your case). Here is the relevant, in-depth quote:
Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword inherit can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword inherit.
Which means that you would need to use the longhand border-color property in order to inherit the border-color value:
Example Here
a:link,
a:visited {
border: 1px solid;
border-color: inherit;
}
Secondarily, I would like to know how to prevent the text from jumping.
If you don't want the inherited border color, simply use a transparent border to displace the added border:
Example Here
a {
border: 1px solid transparent;
}
a:hover {
border: 1px solid red;
}
Alternatively, rather than using a border, you could also use the outline property to add an outline to the element that doesn't affect the element's box model:
Updated Example
a:hover {
outline: 1px solid red;
}
You need to tell the initial position about the border too. So initially, give transparent border, giving the space.
body {
padding: 1em;
}
a:link,
a:visited {
border: 1px solid transparent;
}
a:hover {
border: 1px solid red;
}
<p>
Hello This is a link and here is more text, <b>which doesn't move</b>.
</p>
Now it dares not to move. :) The reason why inherit doesn't work is, none would be the inherited value and it causes border to be 0px. (I am not sure, but that's what is compiled.)
instead of using inherit , try
transparent
Then your css class will look like the one below
a:link, a:visited {
border: 1px solid transparent;
}
This will make sure the border space is already taken and when you hover it doesn't hurt
I would like to "graphically disable" a combobox in extjs by appling a CSS class to remove the borders while the user does not click on it.
How can I apply this CSS class? It is not the border of the field but of a wrapper which wrap both field and picker.
(I have the same problem for datefield)
Ext applies special CSS classes when fields are focused, so that's rahter easy to do focus-dependent styling. Use dev tools to explore the markup and see what you need to change.
For example, for removing all visual clues that it is a field from a combo that is not focused, use this CSS (example fiddle):
.custom-combo .x-form-field:not(.x-field-form-focus) {
border: 1px solid transparent;
background: none;
}
.custom-combo .x-form-item-body:not(.x-form-trigger-wrap-focus) .x-form-trigger {
background: none;
border-bottom: 1px solid transparent;
}
I use border: 1px solid transparent instead of border: 0 to prevent a 1px offset when the combo get focused.