I've tried changing the Background-color of tristatecheckbox as shown below. The said codes will work if I directly update the CSS in the web console. But when I applied it in my codes. it won't work.
.fa-check:before {
Background-color: green !important;
}
.fa-close:before {
Background-color: red !important;
}
Can anyone, help me with this?
You need to prepend your CSS with :host >>>:
:host >>> .fa-check::before {
background-color: cyan !important;
}
:host >>> .fa-close::before {
background-color: magenta !important;
}
Note that I've changed the colors since green & red are the defaults.
Plunker example
Related
I would like to style the p-dialog's Close Icon. The default 'x' button is in grey color and I would like to change it to white color with font-size increased. I found that we could use .p-dialog-titlebar-close but haven't been successful. I used it in the following way-
::ng-deep .p-dialog .p-dialog-titlebar-close {
color: #fff;
font-size: 16px;
}
Please let me know how can I change the 'X' to show in white color. ( Since it currently is barely visible). Greatly appreciate any help. Thank you in advance.
Attaching the screenshot for detailed explanation.
I tested with the following and it works as expected:
:host ::ng-deep .p-dialog-header-close-icon {
color: red;
font-size: 2rem;
}
I'm using antd NPM package's Select component. I want to remove the blue outline which appears when the component is focussed. How can I remove it ?
I have tried styling the component using styled components. The styling looks like follows:
const StyledSelect = styled(Select)`
& .ant-select-selection__rendered {
width: 200px;
margin-left: 0;
margin-right: 0;
&:focus {
outline: none;
border: none;
}
}
&.ant-select-focused {
border: none;
&:focus{
outline: 0;
}
}
`;
I expect the blue outline to be removed. But my styling doesn't seem to be working
If you observe the CSS in your browser you can see what you need to override.
.ant-select-focused .ant-select-selector,
.ant-select-selector:focus,
.ant-select-selector:active,
.ant-select-open .ant-select-selector {
border-color: #d9d9d9 !important;
box-shadow: none !important;
}
I left it for hover.
codesandbox: https://codesandbox.io/s/cool-moon-ohznt
A clean approach would be to set the bordered option to false as shown below. More options and reference are available at https://ant.design/components/select/#components-select-demo-bordered
<Select defaultValue="lucy" style={{ width: 120 }} bordered={false}>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
I managed to fix it in a difficult dropdown input with:
.ant-select:hover .ant-select-selector {
border-color: #a2a2a2 !important;
box-shadow: none !important;
}
This worked fine for me:
.ant-select-selector {
border-color: rgba(204, 204, 204, 0.5) !important;
box-shadow: none !important;
}
The border-color will overwrite the border when it's focused and when it's not, if you want to change the border just when it's focused apply a style on .ant-select-open
.ant-select-focused .ant-select-selector,
.ant-select-selector:focus,
.ant-select-selector:active,
.ant-select-open .ant-select-selector {
border-color: #d9d9d9 !important;
box-shadow: none !important
}
this worked for me to get ride of the default blue boarder when input is selected
I am working on md-slider, Here my question is how can we have the color of the slider as own, as default the having two classes md-warn(for red), and md-primary(for white). I want white color slider.
How can I achieve this?
Visores' answer was very useful, however this didn't quite match the functionality of the default slider insofar as the right hand side of the md-thumb ends up the same colour as the rest of the slider. By changing the
.md-track to .md-track-fill, you will match the default functionality. The code will therefore look as follows:
#red-slider .md-thumb:after, #red-slider .md-track-fill{
background-color: greenyellow !important;
border-color: greenyellow !important;
}
#red-slider .md-focus-thumb, #red-slider .md-focus-ring{
background-color: greenyellow;
}
CodePen example
you can achieve a custom color by overwriting the css-class of the slider.
codepen example
#red-slider .md-thumb:after, #red-slider .md-track{
background-color: greenyellow !important;
border-color: greenyellow !important;
}
#red-slider .md-focus-thumb, #red-slider .md-focus-ring{
background-color: greenyellow;
}
css classes to overwrite:
.md-thumb:after
.md-track
.md-focus-thumb
.md-focus-ring
I didn´t tested all the functionality of the slider. But basically you have to overwrite all the styles from the slider. You can find them at the git repo
Additional, you can custom the color of balloon on the md slider by this code:
#red-slider .md-sign, #red-slider .md-sign {
background-color: blue;
border-top-color: blue;
}
#red-slider .md-sign:after, #red-slider .md-sign {
border-top-color: blue;
}
This can change the color of balloon as you neeeded
Is there any way to change onsen-ui lists (ons-list) to look like a CardView as the below picture.
The borders are set in background and I tried to change them and setting padding and margin with no chance.
By changing these styles I have achieved the below picture
.list__item{
border-style:solid !important;
border-width:1px !important;
border-color:#ddd !important;
box-shadow:2px 2px 1px #eee !important;
margin:10px !important;
}
Hi i am using some bower packages but there are some css rule defined like below:
.rn-carousel-indicator {
width: 100%;
text-align: center;
height: 20px;
background-color: black;
I want to override it into my common.css to remove the background-color, I can successfully set it as red but it cannot apply with none:
.rn-carousel-indicator {
background-color: none;
}
Anyway I can do with this? Thanks a lot!
background-color:
The background-color CSS property sets the background color of an element, either through a color value or the keyword transparent.
So none is invalid, you should use:
background-color: transparent;
You have a couple of options
background: none;
or
background-color: initial;
Note, initial has some dodgy browser support.
(No support in IE apparently)
background-color: none is invalid. you have to use background color transparent property.
For example:
background-color: transparent;