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
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>
Is it possible to change the value of a <p> after hovering over an <h1> only using CSS?
When the user hovers over a heading, I want the color value of a <p> element to change accordingly. I'd like to achieve this using only CSS.
Yes You can. Here is an example.
#a:hover ~ #b {
background: #ccc;
}
<h1 id="a">Heading</h1>
<p id="b">random Text</p>
But element with id b must be after a.
Hope that was Helpful!
if the h1 directly precedes the <p> tag, you could do something like:
h1:hover + p { color:red; }
Note that IE needs a <!doctype> before it will honor hover on elements other than <a>, and the + selector does not work in IE 6
It is possible, but requires a sort of "hack". My advice would be to go with JavaScript, JQuery for this action, much easier.
I'm reading this question as changing the actual value inside the <p> element. If that's the case here is how it can be done.
Fiddle: https://jsfiddle.net/fc3rhgow/1/
HTML:
<h1 id="myH1">this is the h1</h1>
<p id="myP">this is the p</p>
JavaScript:
var h1 = document.getElementById("myH1");
var myP = document.getElementById("myP");
h1.addEventListener("mouseover", mouseOver);
function mouseOver(){
myP.innerHTML = "new value";
}
Perhaps this decision will suit you. Good luck.
h1:hover + p:before{
content:'Ohhh hover h1';
}
h1 + p:before{
content:'h1 no hover ';
}
<h1>Header H1</h1>
<p></p>
Depending on what you mean by 'value', and what your HTML looks likes (ie, which p element you wish to modify) you can do something like...
h1:hover p
{
color: red;
font-size: 2em;
}
OR maybe this?
h1:hover ~ p
{
color: red;
font-size: 2em;
}
OR this perhaps?
div h1:hover p
{
color: red;
font-size: 2em;
}
OR maybe even this?
h1:hover > div p
{
color: red;
font-size: 2em;
}
Whatever you need to to target mate...
NB: As far as I know, we can't target parent selectors :-(
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;
};
}
I want to apply a css rule to everything (* { color: red; }).
But, how can I do this without the need for Javascript or applying a class to everything I want it to be applied to?
Something like:
*:not-type(div) {
color: red;
}
And the document would be:
<span>this is red</span>
<span>this is red</span>
<div>this is not red</div>
Try like this:
*{
color: red;
}
div{
color: blue;
}
To select everything except div elements you would write:
:not(div) {
color: red;
}
Caveat: while this rule correctly selects all elements except div, it does not prevent a div from inheriting red color from its parent which is the default behavior.
Try like this:
:not(div){
color: red;
}
I am having problem with nested CSS declarations for nested elements. Emm.. It's really hard to describe the problem, if you don't get what I mean, please just go to the jsfiddle link I provide below, you would understand what's the issue.
Here is the markup
<div class="red">
<h1>should be red</h1>
<div class="blue">
<h1>should be blue</h1>
</div>
</div>
and here is the CSS:
.blue h1 {
color: blue;
}
.red h1 {
color: red;
}
Notice that I put .blue h1 before the .red h1 declaration. But I have .blue element as a child of .red element. Please see the output on the jsfiddle. It shows wrong color on the .blue h1 element. However if I swapped the declaration into .red h1 first and then .blue h1, it's all fine. But I CAN'T do that in my real case and moreover if I swap the declaration, it won't work if the markup is also swapped. Vice versa.
http://jsfiddle.net/N7FcB/
Anyone got an idea how to solve this one?
PS: I know that having direct child selector will solve the problem. But I avoid to use it, because the element I am targeting (<h1>) is not always a direct child of the element with the class.
Thanks before :)
Update:
Imagine I have this kind of declaration
.red h1 { color: red }
.green h1 { color: green }
.blue h1 { color: blue }
.gray h1 { color: gray }
/* and so on */
I can freely create my markup whether it's blue inside red or the opposite or gray inside red which is inside blue. It should work well in any conditions I write the nested markup.
Update:
I think everyone does not really get what I am seeking here, please check out this new fiddle, it has better understanding of what I want. the first case is the false one, the 2nd case is the right one.
http://jsfiddle.net/kmMXW/9/
If you do not want direct child selector, just add a parent reference for the nested elements.
This will make your thing work.
You can add the below.
.red .blue h1 {
color: blue;
}
WORKING DEMO
To enforce your div to render the color blue, you just need to add the reference of the element that you are using to the class.
for Instance,
div.blue h1 {
color: blue;
}
WORKING DEMO - 2
In both cases, it will work.
Browser reads your CSS from top to bottom and it will apply in the same way..
So first you have a rule called
.blue h1 {
color: blue;
}
So browser will parse this information and will color your h1 as blue, but it goes ahead and it hits second selector which is
.red h1 {
color: red;
}
Now, as your h1 which is nested inside .blue is further nested inside .red and also, the specificity of both the selectors are same, browser will go ahead and apply red to the inner h1.
So what's the solution?
If you can, just swap the order of your classes... No? You cannot? than use a specific selector..
div.blue h1 {
color: blue;
}
Demo
The above selector is more specific compared to .red h1 as it has a class, and 2 elements... so here, browser will pick up first rule as it is more specific, thus overriding your .red h1 selector.
You can make your selectors specific as much as you need, you can write the above as div.red div.blue h1 or .red .blue h1, but just remember, the more specific selectors you use, the more you hit performance bar, also you will end up writing more and more specific selectors inorder to override others, so choose wisely..
hope it will help you
.red > h1 {
color: red;
}
.blue h1 {
color: blue;
}
select as direct child you will not face any more problem.
Or maybe like that:
.red > h1 {
color: red;
}
.blue h1 {
color: blue;
}
fiddle.
This is 100%.
how about this?
div.red > h1 {
color: red !important;
}
div.blue > h1 {
color: blue !important;
}
or throw div element
.red > h1 {
color: red !important;
}
.blue > h1 {
color: blue !important;
}
http://jsfiddle.net/N7FcB/6/
.blue > * {
color: blue;
}
.red > * {
color: red;
}
You can always try ">" selector combined with wildcard
myfiddle
Actually how many H1 do you need inside a div? i say not much. so why don't why give the class to the H1.
h1.red { color: red; }
h1.green { color: green; }
h1.blue { color: blue; }
Update
How about having a box with depth level, see fiddle http://jsfiddle.net/AnL7R/
by having linked classes you can override the upper one, e.g:
.blue,
.blue.first,
.blue.second
/*more depth class*/
{
color: blue;
}
.red,
.red.first,
.red.second
/*more depth class*/
{
color: blue;
}
Hope it helps