I use this css-script which i include over setStyle:
checkBox.setStyle("" +
".check-box:selected > .box {\n" +
" /* background color for selected checkbox */\n" +
" -fx-background-color: lime;\n" +
"}\n" +
"\n" +
".check-box > .box {\n" +
" /* background color of unselected checkbox */\n" +
" -fx-background-color: red;\n" +
"}\n" +
"\n" +
".check-box:selected > .box > .mark,\n" +
".check-box:indeterminate > .box > .mark {\n" +
" /* modify mark color */\n" +
" -fx-background-color: blue;\n" +
"}");
But it doesn't work....
I use Java 9
Thanks for your help
This won't work. The style property can only contain property assignments, not selectors.
You could assign those colors using a combination of a stylesheet and the style property though by using looked-up colors (only works for colors though):
CSS stylesheet
.check-box {
/* default properties */
selected-box-color: black;
box-color: black;
mark-color: white;
}
.check-box:selected > .box {
/* background color for selected checkbox */
-fx-background-color: selected-box-color;
}
.check-box > .box {
/* background color of unselected checkbox */
-fx-background-color: box-color;
}
.check-box:selected > .box > .mark,
.check-box:indeterminate > .box > .mark {
/* modify mark color */
-fx-background-color: mark-color;
}
Java Code
// overwrite colors from stylesheet
checkBox.setStyle("selected-box-color: lime; box-color: red; mark-color: blue;");
With the setStyle() method in JavaFX, you can style the default state of a component with your css code in the class code however I don't think you can change the selected state's css. I would recommend just giving the node a unique ID with node.setID("someID") and then working in an actual css file
Related
I am formatting the color of my Atom indent guide lines.
The Atom stylings are in CSS but I can't figure out how to repeat the pattern.
This is what is looks like at moment:
And this is my code:
.editor {
.indent-guide {
// first level
color: rgb(255, 140, 0);
// second level
&:nth-child(2) {
color: rgb(138,43,226);
}
// third level
&:nth-child(3) {
color: rgb(46,139,87);
}
}
}
What is missing?
repetition is missing: you are targeting 2nd and 3rd child only, as exception to the first rule which is applied to all .indent-guide elements.
Use instead 3n + 1 and 3n + 2
.editor {
.indent-guide {
// first level
color: rgb(255, 140, 0);
// second level
&:nth-child(3n + 1) {
color: rgb(138,43,226);
}
// third level
&:nth-child(3n + 2) {
color: rgb(46,139,87);
}
}
}
I want to style all external links in my website (Xenforo). I'm trying with:
a[href ^= "http"]:after {
content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
}
Looks good, but i need to add red color too. How can i do that?
You can use the same attribute select, and style the a element with red color:
a[href ^= "http"] {
color: red;
}
a[href ^= "http"]::after {
content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
}
Internal
Internal
I am new to css and i would like to know if css can be applied to the properties of tag?
For example in the below code i would like to see entry.count and "files" in blue color.
code
render() {
return(
<div className="AppL" id="AppList">
{this.createApplicationList()}
</div>);
}
createApplicationList() {
var guiResult = [];
for (var key in this.state.AppName) {
var entry = this.state.AppName[key];
guiResult.push(
<Collapsible trigger={entry.AppName + "\t" + "\t" + entry.Count + " files"} className="AppList" transitionTime ="10">
</Collapsible>);
};
return guiResult;
}
my scss for this component
.AppList{
color: black;
border-bottom: 1px solid #00a886;
padding-top:10px;
padding-bottom:10px;
}
.Collapsible .Collapsible__trigger {
color: blue;
}
.Collapsible selects all elements with the Collapsible class. Collapsible_trigger does the same for the Collapsible__trigger class. Together, the rule selects all .Collapsible__trigger elements within .Collapsible elements, and styles them with blue text.
This is based purely on your provided HTML code. The JavaScript appears to be irrelevant.
.Collapsible .Collapsible__trigger.is-closed also works and is more specific. Depends on your use-case.
For my UI-Grid I've created conditional formatting with the following row template in the $scope.gridOptions object:
rowTemplate: '<div ng-class="{\'recruiter-row-active\':row.entity.activePositions!=0, ' +
'\'recruiter-row-passive\':(row.entity.activePositions==0 && row.entity.passivePositions !=0),' +
'\'recruiter-row-free\':(row.entity.activePositions==0 && row.entity.passivePositions==0)}">' +
'<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" ' +
'class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div></div>'
The classes look like this:
.ui-grid-row .recruiter-row-active {
background-color: #ff816b !important;
}
.ui-grid-row .recruiter-row-passive {
background-color: #fcff9d !important;
}
.ui-grid-row .recruiter-row-free {
background-color: #70cc79 !important;
}
The class for the html row in question is "ui-grid-row" and "ng-scope" and the parent element has class "ui-grid-canvas"
I was able to get my conditional formatting to work when I also implemented a
.ui-grid-row .ui-grid-cell {
background-color: inherit !important;
}
However I don't want to affect the other grids in my web app.
How would I get my conditional row formatting to override the default?
You can use scss and wrap your grid with a:
<div view="my-colors">
<!-- your grid element goes here -->
</div>
in the scss file, wrap the styling you want to affect only that view with:
[view="my-colors"] {
.ui-grid-row .ui-grid-cell {
background-color: inherit !important;
}
}
How do I change md-input-container placeholder color using css in Angular Material? As screenshot below I have phone no. and password textfield. Phone no. textfield has Phone No. and password has Password placeholder name.
in the last version of angular you can remove the placeholder in the input and add a mat-placeholder in the mat-form-field and custom the css with a class
html :
<mat-form-field>
<input matInput type="text">
<mat-placeholder class="placeholder">Search</mat-placeholder>
</mat-form-field>
css:
.mat-focused .placeholder {
color: #00D318;
}
Placeholder is depicted as a <label> in Angular Material. So you actually need to style the label not the placeholder.
As soon as you click (focus) on the input this <label> which is looking as a placeholder slides up and converted into a form <label>.
So you just need to apply this CSS:
/* When the input is not focused */
md-input-container label {
color: red;
}
/* When the input is focused */
md-input-container.md-input-focused label {
color: blue;
}
Have a look at this Plunkr Demo.
In Angular 4+
First you will need to turn ViewEncapsulation off to style Material Elements. Be warned this is subverting the Angular emulated-shadow DOM default and you should proceed with caution (https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html).
In dummy.component.ts:
#Component({
...,
encapsulation: ViewEncapsulation.None,
})
Then give your < mat-form-field > element a unique class in dummy.component.html:
<mat-form-field class="dummy-input-field" floatPlaceholder="always">
<input placeholder="Dummy"/>
</mat-form-field>
Finally in dummy.component.css apply the styling:
.dummy-input-field .mat-input-placeholder {
color: red;
}
Similarly, if you'd like to dynamically change color if the field is focused:
.dummy-input-field.mat-focused .mat-input-placeholder {
color: red;
}
.container {
.mat-form-field-outline,
.mat-form-field-empty.mat-form-field-label,
.mat-form-field-label,
.mat-form-field-underline,
.mat-input-element,
::placeholder {
color: $white !important;
}
}
The code above gives me the results below. I am overriding the form-field outline, label-empty, label, underline, input element, placeholder text.
I'm using Angular 8.2.2 and Angular Material 8.2.2
For the newer versions of material which have a mat prefix instead of md prefix, you can do this in 2 ways:
way 1: using view encapsulation set to none and then writing the styles in the components css file, like #user2245995 pointed out in the answer above.
Although this is the way angular suggests, please be advised that the styles you write here will propagate to all the child/parent components and effect other elements there.
way 2: We can use the shadow piercing descendant combinators i.e. /deep/ or ::ng-deep or >>> Below is an example
/deep/ label.mat-input-placeholder {
color: #fff; // choose the color you want
}
Although this method is specified in the angular docs as of now, they have mentioned that this method will soon be deprecated.
read more: https://angular.io/guide/component-styles#!#-deep-
I tried to be as deterministic as possible for the color of a mat input and I dare to share the result here, hoping it will help some others (the placeholder color customization need is handled, as asked in the question):
CSS custom properties used
Note: The colors are considered different when the focus is here or not, that is why we have 2 blocs in the following:
--clear-button-color: lightblue;
--asterisk-color: lightgreen;
--label-color: springgreen;
--underline-color: blue;
--input-color: lightgray;
--clear-button-focused-color: blue;
--asterisk-focused-color: green;
--label-focused-color: pink;
--underline-focused-color: yellow;
--input-focused-color: gray;
--placeholder-focused-color: magenta;
--caret-focused-color: blue;
SCSS styling
.mat-form-field {
&.mat-focused {
> .mat-form-field-wrapper {
> .mat-form-field-flex {
> .mat-form-field-infix {
> .mat-input-element {
color: var(--input-focused-color);
caret-color: var(--caret-focused-color);
&::placeholder {
color: var(--placeholder-focused-color);
}
}
> .mat-form-field-label-wrapper {
> .mat-form-field-label {
> mat-label {
color: var(--label-focused-color);
}
> .mat-placeholder-required {
color: var(--asterisk-focused-color);
}
}
}
}
> .mat-form-field-suffix {
> .mat-focus-indicator {
> .mat-button-wrapper {
> .mat-icon {
color: var(--clear-button-focused-color);
}
}
}
}
}
> .mat-form-field-underline {
> .mat-form-field-ripple {
background-color: var(--underline-focused-color);
}
background-color: var(--underline-focused-color);
}
}
}
> .mat-form-field-wrapper {
> .mat-form-field-flex {
> .mat-form-field-infix {
> .mat-input-element {
color: var(--input-color);
&::placeholder {
color: var(--placeholder-color);
}
}
> .mat-form-field-label-wrapper {
> .mat-form-field-label {
> mat-label {
color: var(--label-color);
}
> .mat-placeholder-required {
color: var(--asterisk-color);
}
}
}
}
> .mat-form-field-suffix {
> .mat-focus-indicator {
> .mat-button-wrapper {
> .mat-icon {
color: var(--clear-button-color);
}
}
}
}
}
> .mat-form-field-underline {
> .mat-form-field-ripple {
background-color: var(--underline-color);
}
background-color: var(--underline-color);
}
}
}
.mat-input-element::-webkit-input-placeholder {
color: red;
}
this is if you use a structure similar with this one:
<input
matInput
[placeholder]="placeholder"
/>