I am looking for an opposite of select:focus, something that would style the select from CSS after a selection is made.
concept:
select:when not focused
{
color:transparent;
}
You could use :not pseudo-class and combine it with the :focus one. Something like this should work:
select:not(:focus) {
color: red;
}
Here's a demo: http://jsfiddle.net/b2rnU/1
do u mean on focusout
$("element").focusout(function() { ... });
Editing to what #Pzin said, add a new class with select to get what you want.
Like
select:focus {
background: white;
}
Related
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;
};
}
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; }
CSS:
button:active {
/* active css */
}
button:disabled {
opacity: 0.5;
}
HTML:
<button disabled="disabled">Ok</button>
When I click the button the browser adds the button:active state making it look like it was clicked (even though it is disabled). I swear I thought :active was only added if the button was enabled. What have I missed?
From what I can tell, :active doesn't exclude :disabled elements. You can read the spec if you'd like.
To solve your problem, you could exclude :disabled elements by targeting only :enabled elements with your :active selector:
button:enabled:active {
/* active css */
}
button:disabled {
opacity: 0.5;
}
Demo: http://jsfiddle.net/Blender/LRvra/1/
According to the CSS3 specification (:disabled is not in CSS2.1) there is no mention that :active and :disabled are mutually exclusive. It's possible that this part of the specification needs clarification so UAs are free to apply the pseudo-classes in combination.
I suggest you modify your selectors to be more explicit:
button:enabled:active {
/* active css */
}
button:disabled {
opacity: 0.5;
}
You could also use the :not()-descriptor of css:
button:active:not(:disabled) {
/* active css */
}
button:disabled {
opacity: 0.5;
}
Wish y'all the best, Patric
Suppose I have this HTML:
<div class="SomeClass">test</div>
<div class="SomeClass" id="SomeID">test</div>
<div class="SomeClass">test</div>
with this CSS
.SomeClass{color:blue;}
.SomeClass:hover{color:red}
I want the hover effect not to apply to the SomeID div. I can do this with jQuery but I was wondering if there's an easier way to do it with just CSS.
Thanks for your suggestions.
CSS is parsed in order, meaning that if after you define
.SomeClass:hover { color: red; }
You then define a rule
#SomeId.SomeClass:hover { color: blue; }
That should 'overwrite' the initial color: red;
Just assign another rule to the div with an id of SomeID. This will override the other rule.
.SomeClass{color:blue;}
.SomeClass:hover{color:red}
#SomeID:hover{color:blue}
jsFiddle example
Just overwrite the style:
#SomeID:hover {
color:blue;
}
Alternatively, you could use:
.SomeClass:not(#SomeID):hover {
color:red;
}
Then it is easier to change it, but less browser support.
Let's take a look at link pseudo-class specificity:
Remember: LAHV (:link, :active, :hover, :visited).
First, in order to cascade properly, let's assign the following to .SomeClass:
.SomeClass:link, .SomeClass:active, .SomeClass:visited { color: blue; }
.SomeClass:hover { color: red; }
Next, let's specify #SomeID:
#SomeID:hover { color: blue; }
id always takes precedence over class.
I have this problem in css where i have two different states in css for example
#koolbutton .active {
color: #fff
}
#koolbutton{
color: #ccc //not active
}
When i try this html
<button id ="koolbutton" class="active">
It gives me the the normal grey koolbutton not the active one which is white! thanks
You need to omit the space between #koolbutton and .active.
#koolbutton { /*not active*/ }
#koolbutton.active { /*active*/ }
The issue is with your first selector:
#koolbutton .active
Since there is a space between the id and class selector, this applies to every element with a class of active and an ancestor with an id of koolbutton. What you want is to select every element with a class of active and an id of koolbutton:
#koolbutton.active
Although the order of your selectors doesn't matter due to CSS Specificity rules, in terms of creating more maintainable CSS I would recommend you put the default styles first, followed by any variations to that style:
#koolbutton { /* default styles */ }
#koolbutton.active { /* .active styles */ }
#koolbutton.foo { /* Another class styles */ }
If you are really wanting to style active/focus states, you should probably look at the :focus and :active pseudo selectors.
You may try this one also;
#koolbutton:active {
color: #fff; //when user click the button
}
#koolbutton{
color: #ccc; //normal display of button
}
Here is the working Live Demo.