I'm using jQuery validate on a form I am building and it is working great. What I want to do is when something is invalid to have the text field change colors and the error message to be white. I figured the following CSS would work:
label .error {color: white; font-weight: bold;}
input .error {background-color: pink; border: 1px dashed red; color: white}
When I test the validation the above CSS doesn't seem to apply. I checked using Firebug and the label and input area have the 'error' class applied.
The CSS seems valid as when I leave off the .error clause everything looks like I want it too. What am I doing wrong?
One space can be one too much. Try:
label.error {color: white; font-weight: bold;}
input.error {background-color: pink; border: 1px dashed red; color: white}
Background info:
label .error /* selects all elements of class "error" *within* any label */
label.error /* selects labels of class "error" */
Try label.error and input.error without spaces.
Related
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.
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'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
I have html table and layout for it (something like that, also i use haml+sass):
.zebra{
.zebra-stripe{
&.zebra1{
a{
color: red;
}
a:hover{
color: blue;
}
}
}
my htm table has class zebra, and tr has class .zebra-stripe .zebra1
but there i have link with other style (like button) and this link has own height with background, but color is setted to orange on hover,
.details-link{
width: 70px;
margin: 2px;
}
.details-link:hover{
color: orange;
}
but when my mouse is over this link it's color is not orange, but blue as setted for table.... what is wrong?
How to set link hover text color to orange (i setted it, but it is not viewing properly)....
If something is not clear write me in comments...
You problem is the specificity of the selectors you're using, .zebra .zebra-stripe.zebra1 a:hover is more specific than .details-link:hover. Try the following instead to make your selector more specific:
.zebra .zebra-stripe.zebra1 a.details-link:hover {
color: orange;
}
Try out this:
a.details-link:hover{
color: orange;
}
I am tring to style a input submit button like an anchor.
But it is putting a second line underneath the anchor.
How do I style just one line?
.usernameAnchor
{
background-color:white;
color: #034af3;
text-decoration: underline;
border: 0px none;
display:inline;
height:25px;
}
Malcolm
EDIT: This problem is in IE8.
That seems to be working fine as I created and checked that here:
http://jsbin.com/adake3/2
Looks like there is something there with your html markup.
Update:
After seeing your code, you are trying to set the text-decoration to underline, but mind you this is a button not a link. One alternative is to give border-bottom to it to mimic underlining something like this:
.usernameAnchor:hover
{
border-bottom:1px solid #0000ff;
}