How can i change color of focused floating label in polymer?
Thanks for answers.
The only way I was able to get around this issue was with this:
paper-input-decorator[focused] /deep/ .floating-label,
paper-input-decorator[focused] /deep/ .label-text {
/* floating label color when the input is focused */
color: orange !important;
}
Notice how it was necessary to type paper-input-decorator[focused] /deep/ twice
You could also use core-style to do this if you didn't want to use the /deep/ selectors, it would look something like this (untested):
<core-style id="paper-input-decorator">
.floating-label, .label-text {
color: orange;
}
</core-style>
You can set the following polymer style variable: --paper-input-container-focus-color, for example
#myInput{
--paper-input-container-focus-color: red;
}
For an Information:
To change any style of a label or floating label inside the paper-input, use the code below.
paper-input {
--paper-input-container-label: {
color: red;
font-size: 14px;
};
--paper-input-container-label-floating: {
color: red;
font-size: 14px;
};
}
Related
I am trying to add a focus styling to an element. However, I have ::focus and a class .focus. Since I'm using SASS thought it would be easier to create my own style value then #extend it to the two focuses to save on coding.
But whenever I write it, it isn't working and the styling just doesn't appear. If any one has any ideas as to why it would be greatly appreciated thanks.
Heres a small example of the code I've got.
%button-styling {
color: $grey;
%btn-focus {
color: $white;
}
&::focus,
&.focus {
#extend %btn-focus;
}
}
As Sass docs said, any complex selector that even contains a placeholder selector isn't included in the CSS .... So it is not meaningful to put %btn-focus inside %button-styling placeholder. For me these styles in a scss file work fine:
$grey: red;
$white: #FFF;
%btn-focus {
color: $white;
}
%button-styling {
color: $grey;
&:focus,
&.focus {
#extend %btn-focus;
}
}
button {
#extend %button-styling;
}
And in your html you may have something like this:
<div>
<button class="focus">btn-focus</button>
</div>
<!-- or -->
<div>
<button>btn-focus</button>
</div>
I'm using Angular Material's mat-error inside a form to show validation errors. These are by default displayed in orange. Is it possible to adjust its styling to make them red?
I tried:
mat-error{
color: red !important;
}
With no success.
Thank you in advance!
try this css.
.mat-input-invalid .mat-input-placeholder {
color: red;
}
.mat-input-invalid .mat-input-ripple {
background-color: red;
}
You can add it to :root {}
:root {
.brand-theme .mat-error {
color: red;
}
}
try this
.mat-form-field-appearance-legacy .mat-hint
{
color: red;
}
You can customise the theme. See here
Or add ::ng-deep in the css:
mat-error ::ng-deep{
color: red;
}
The ::ng-deep method is however deprecated, see here
As of today, these are displayed in red.
You can change the error color by changing the warn-palette in theming, see https://material.angular.io/guide/theming
I have some anchor tags that get dynamic color based upon the classes assigned to them but on focus, they get a white color cause of bootstrap overrides.
now I need to override the default bootstrap style for anchor only with this class say a.custom-label and another generic class to get the original color (before focus) on focus like this:
a.custom-label:focus {
color: unset;
color: initial;
color: revert;
color: inherit;
color: none;
}
I tried these but nothing seems to work, can someone share a way to achieve this?
a.custom-label:focus { color: #000 !important; }
You can change color you want in place of #000. Also if you don't want to use !important then add external css and call it below bootstrap css in head block.
Try putting "!important" after the color name
for examle:
a.custom-label:focus {
color: #2d2d2d !important; }
The best possible way was to remove the default bootstrap label class from my HTML elements and pick all the styles in bootstrap for .label class and paste it in my custom.css with a selector .custom-label except on focus styling like this:
.custom-label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
and using only this class for all my elements.
this gives all the default style of bootstrap but as no styling for onfocus was pasted so issue got fixed.
This is the site:
http://avocat.dac-proiect.ro/wp/?page_id=19
I have a contact form and the text color is black
I want to change the color and used the CSS code but unfortunately this does not work ...
.contactform11 .wdform-label{color:white;}
How can I solve this problem?
Thanks in advance!
There is a style .contactform11 .wdform-label (same selector, just as specific), specified in the page itself (around line 900). This style selector will override the one you added to the style sheet.
There is an !important, first get rid of that.
.contactform11 .wdform-label {
color: #B7B6C3 !important;
}
Then in the code block here replace #000, with #fff:
.contactform11 .wdform-label {
border: none;
color: #000; /* should be #fff */
vertical-align: top;
line-height: 17px;
}
If you can't access the css file for some reason, it's a very simple change with js.
You can use something like
[].forEach.call(document.querySelector('.contactform11 .wdform-label'),
function(el) { el.style.color = '#fff' } )
There is a small npm module to abstract this further. (Don't have to constantly rewrite .call and document.querySelector over and over... )
var forEachEl = require('for-each-el')
forEachEl('.contactform11 .wdform-label',
function(el) { el.style.color = '#fff' })
Try this
.contactform11
.wdform-label {
#000;
}
Maybe is because the order in wich the css rules are aplied. Try using:
.contactform11 .wdform- label{color:white !important;}
Go on and use the element instead maybe? Then assign in an id of 'contactform11' and use the css selector to set the label colors to whatever you desire (White in this case) See below:
<form id="contactform11"><label>Name</label></form>
CSS:
#contactform11 label {
color: #FFF;
}
Should do the trick!
Remove the space between .contactform11 and .wdform-label.
So:
.contactform11.wdform-label{ color: #FFF; }
I'm working with a project where the placeholder color was defined globally by developer. But now I need to style a form with a different placeholder color. How can I address it correctly?
js fiddle
CSS
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder {
color: red;
}
::-moz-placeholder {
color: red;
}
:-ms-input-placeholder {
color: red;
}
.box input::-webkit-input-placeholder, .box textarea::-webkit-input-placeholder {
color: blue;
}
.box input:-moz-placeholder, .box textarea:-moz-placeholder {
color: blue;
}
.box input:-ms-input-placeholder, .box textarea:-ms-input-placeholder{
color: blue;
}
Try this code:
http://jsfiddle.net/vyDns/3/
you where close only needed to add .box in front like:
.box::-moz-placeholder
Cheers
Simply because I think the other answer by Filip Huysmans was just copied from Vucko's comment. I am going to also answer it and explain why your code didn't work.
Lets use this one as an example:
.box input::-webkit-input-placeholder {
color: blue;
}
Here you are selecting .box and then trying to find an input to change the placeholder colour. If your code was like this:
<div class="box">
<input placeholder="blue" />
</div>
It would have worked. In the code above you are selecting the class .box and then finding all inputs within it.
DEMO HERE
Now in your code we have:
<input class="box" placeholder="blue" />
So you are already in the input, thats why your code didnt work. There is no input in the input. So taking away input from the CSS and leaving just .box means you are selecting just that input.
.box::-webkit-input-placeholder
DEMO HERE
Hope this explains it well enough for you to understand where you went wrong.
You can reach your target in several solutions.
In the first one, you should change your HTML markup. With your CSS, you first search for the class "box", and the for the input element. So the working HTML markup would be:
<span class="box"><input /></span>
While the span element could be any other element, it should just have the box as class.
Demo 1
The second solution is to write the input (and also textarea) in your CSS in front of the .box element. So you call only input and textarea elements which have the "box" class.
input.box::-webkit-input-placeholder, textarea.box::-webkit-input-placeholder {
color: blue;
}
Demo 2
The last solution is to delete the input and the textarea part. So you'll call all elements, which have "box" as a class.
.box::-webkit-input-placeholder {
color: blue;
}
Demo 3
This worked for me
-webkit-text-fill-color: white;
opacity: 1;
Just add it in the input/text area tag directly
eg. https://codepen.io/anon/pen/LqgOOp