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?
Related
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.
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
In angular 10, using #angular/material, how can I reduce the mat-form-field appearance of the outline border on hover state.
I am able to modify the default border size using this code:
:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
color: black;
}
On hover a thick black color is showing like this
I need to show it like this on hover
If you inspect the input element in the browser, you'll notice that the hover state affects 3 inner elements inside .mat-form-field-outline. Therefore, to force all those elements to get a black border with a 1px width even on hover state, you could do this:
.mat-form-field ::ng-deep .mat-form-field-outline-start,
.mat-form-field ::ng-deep .mat-form-field-outline-gap,
.mat-form-field ::ng-deep .mat-form-field-outline-end {
color: black;
border-width: 1px !important;
}
⚡ Here is a working example: https://stackblitz.com/edit/angular-stackoverflow-66985351
I am attempting to style a mat-checkbox (material2) according to the following requirements:
A black, always visible border (regardless of checked status) (#0000000)
When checked, the "tick" will be white(#ffffff), on a coloured(teal) background (border still visible)
When unchecked, the background(inside the border) of the checkbox should be off-white (#dddddd).
So far, I have been able to set the border color, but when checked, it disappears, behind the teal color
I can set the unchecked background color, but again, the black border disappears when I do this. If I remove this setting, the border appears, but the background color is wrong.
The scss properties I am setting are as follows:
::ng-deep .mat-checkbox .mat-checkbox-frame {
border-color: mat-color($darkPrimary, darker); //black
}
::ng-deep .mat-checkbox-background {
background-color: mat-color($darkPrimary, 200); //off-white
}
It seems that whatever I set the background as, overwrites the border style. Additionally, when I change the state of the checkbox, the black border briefly appears, then disappears again. How do I fulfil these requirements?
I realised that angular check-boxes are drawn in layers, with the "tick" layer drawn last, over the top of the black border.
// Background border
.mat-checkbox .mat-checkbox-frame {
border-color: black;
background-color: #dddddd
}
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background {
margin-top: 1px;
margin-left: 1px;
width: 18px;
height: 18px;
}
By reducing the front layers' size, and shifting it a little, the border remains visible.
To style the non checked box:
.mat-checkbox-background{
background-color: transparent;
svg path{
fill: transparent;
}
.mat-checkbox-checkmark-path {
stroke:transparent;
//stroke is the checked mark only
}
}
To style the checked box:
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background {
background-color: #2cc3f8 !important;
svg path {
fill: #2cc3f8 !important;
}
}
Put this in your style.css file, I have kept bg color red but you can change accordingly:
.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: #d71e2b;
}
You can use ::ng-deep like below example.
::ng-deep mat-checkbox.yourcheckbox .mat-checkbox-frame{
border: 0px;
}
i might be late but try using this =, make some changes according to you
::ng-deep .mat-checkbox-checked .mat-checkbox-background,
::ng-deep .mat-checkbox-indeterminate .mat-checkbox-background {
background-color: #437891 !important;
}
::ng-deep .mat-checkbox .mat-checkbox-frame {
border-color: #fa3131;
}
::ng-deep .mat-checkbox-checked .mat-checkbox-background {
background-color: #fa3131 !important;
}
this worked for me:
::ng-deep .mat-checkbox {
margin-right: 8px !important;
}
To style the checked box, this worked for me:
mat-checkbox.mat-checkbox.mat-checkbox-checked label > span.mat-checkbox-inner-container > span.mat-checkbox-background > svg.mat-checkbox-checkmark {
/* MY STYLES HERE */
}
I placed it at the bottom of the global styles.css and decorated the various styles with !important
To have a blue tick on a white background when checked and a white border when not checked, the following worked for me (knowing ng-deep is deprecated):
:host ::ng-deep {
.mat-checkbox .mat-checkbox-frame {
border-color: white !important;
}
.mat-checkbox-checked.mat-accent .mat-checkbox-background {
background-color: white !important;
svg path {
stroke: blue !important;
}
}
}
Angular 13 with Material 13-
<mat-checkbox color="accent" [(ngModel)]="node. Checked" (change)="checkIndeterminate(node, $event)">
{{node.name}}
</mat-checkbox>
Added this to my styles.css:
.mat-checkbox.mat-accent .mat-checkbox-frame { border-color: black !important }
.mat-checkbox.mat-accent .mat-checkbox-background { background-color: rgba(0,0,0,0); }
.mat-checkbox.mat-accent .mat-checkbox-checkmark-path { stroke: black !important }
Result: white checkbox with black border when unchecked, white checkbox with black border and black checkmark when checked.
Im having a problem to determine how to manipulate the Borders for some Tabs
You can see the functionality here on ASP.NET if you are logged-in http://forums.asp.net/user/editprofile.aspx#
You can see for an onClick Event the background-color of the Tab changes to white like its supposed to.
The problem that Im having has to do with the Borders for onClick:
The border-bottom should change from the grey color to white.
The border-left and the border-right should change to the grey color.
Likewise when a Tab is not selected:
The border-bottom should change to the grey color from white.
The border-left and border-right should not have a border.
In my CSS, Im using both the blue and white class for the JavaScript. However I also have: .common-heading-tabs a.selected and this is confusing me.
Here is my Fiddle- if someone could help It would be great
http://jsfiddle.net/NinjaSk8ter/ZSeFA/
I just modified the CSS class for .white a little bit, your CSS mark-up was not the standard:
border-left-color: #A0AFC3;
border-left-style: solid;
border-left-width: 1px;
Additionally, to get the bottom border to go away, you have one of two options, you could do one of either
remove the bottom border from the .common-heading-tabs a class and add it to the .blue class
add border-bottom-color:white !important; to the .white class
The reason that you were seeing the behavior that you were was because the standard tab had a border (from .common-heading-tabs a), and when you switched to white, you tried to change the color or some of the borders, but you used border-left-color-value rather than simply border-left-color, and then you didn't modify the border on the bottom on the tab for the white class, hence either moving the bottom border declaration out of .common-heading-tabs a or explicitly coloring the bottom-border-color:white !important
Hope that helps!
Edit:
You requested having a border run between the tabs, if you were to modify the class .left-col and add to it:
.left-col
{
border-bottom-color: black;
border-bottom-width: 1px;
border-bottom-style: solid;
}
That should do the trick, maybe you should get rid of the borders on the other tabs, if this is what you're looking for, because the double border looks funky.
Let me know if I can help any more
For an example to make bottom border white look this
<html>
<head>
<style type="text/css">
p
{
border-style:solid;
border-bottom-color:white;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>
You have some inheritance going on. Adding explicit values to the .blue class and important to the one in .white worked.
.blue {
background-color: #D7DFEA;
border-bottom: 1px solid #fff;
border-top: none;
border-left: none;
border-right: none;
}
.white {
border-bottom: 1px solid #fff !important;
border-top: 1px solid #A0AFC3;
border-left: 1px solid #A0AFC3;
border-right: 1px solid #A0AFC3;
background-color: white;
}
The problem, as far as I can see, is that while both .common-heading-tabs a and .white are applied to the link, the former is the "more specific" CSS class, which means the browser gives it precedence while determining which styles to apply.
If you want to make sure the .white style overrides the border, you can either add !important to the border style:
.white {
background-color: white !important;
border-bottom-color: #FFFFFF !important;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
...
}
or redesign the appliance of your classes in such a way that conflicting border styles aren't applied to begin with, which in your case could for example mean moving the blue border style from .common-heading-tabs a to .blue.