I want to set style for required and invalid fields for KendoUI items (for example different background color for required input).
Style that I am using is here:
.k-textbox>input[required],
.k-picker-wrap .k-input[required],
.k-datepicker .k-input[required],
.k-dropdown-wrap .k-input[required] {
background-color: yellow;
}
.k-invalid {
background-color: pink !important;
}
Here is jsfiddle: http://jsfiddle.net/spuljko/wTev8/8/
DatePicker works OK, but I can't set style for required or invalid combo box.
Try this,
.k-input, input.k-textbox, textarea.k-textbox, input.k-textbox:hover, textarea.k-textbox:hover, .k-textbox > input{
background-color: yellow !important;
}
.otherCombo .k-dropdown-wrap .k-input{
background-color: blue !important;
}
Demo:http://jsbin.com/ivoqup/12/edit
Related
I have an aspx page with 3 Telerik RadGrids on it. On one of them I need to override the default styling which I have done with this code:
<style type="text/css">
.RadGrid .rgHoveredRow {
background: #25A0DA !important;
color: white !important;
}
.rgAltRow, .rgRow {
cursor: pointer !important;
}
</style>
The problem is that this is applying the to all the radgrid controls. How could this code be changed to apply it to only the radgrid control called Radgrid1?
You should prefix the selectors with the grid's id
<style type="text/css">
#Radgrid1.RadGrid .rgHoveredRow {
background: #25A0DA !important;
color: white !important;
}
#Radgrid1 .rgAltRow,
#Radgrid1 .rgRow {
cursor: pointer !important;
}
</style>
Depending on the resultant HTML you may need to change the first selector to #Radgrid1 .RadGrid .rgHoveredRow notice the extra space
"radgrid control called Radgrid1" you mean it's its name? if so -
.RadGrid[name=Radgrid1] .rgHoveredRow {
background: #25A0DA !important;
color: white !important;
}
I want to customize the placeholders which comes inside the modal i.e , those comes under class styled-input.
I tried with the following CSS but it doesn't seems working.
.styled-input::-webkit-input-placeholder {
color: blue !important;
}
.styled-input:-moz-placeholder {
color: blue !important;
}
.styled-input::-moz-placeholder {
color: blue !important;
}
I am trying to do some css styling in a stylesheet for a JavaFX scene.
It is going to be loaded upon opening the scene, and targets all the "basic" elements of a scene.
My problem is that i can't seem to find the right combination of code, to change the background color, of the button in a standard JavaFX checkbox.
This is where i am now:
.check-box:selected{
-fx-background-color: #00FF00;
}
I have tried some variants of the above, like
.check-box .button{
-fx-fill: #00FF00;
-fx-background-color: #00FF00;
}
and others, but without success.
So in general, how do i access a button in a checkbox?
Thank you in advance :-)
The parts of the CheckBox to apply the -fx-background-color to are .box and .box > .mark in case you want to change the mark color:
.check-box:selected > .box {
/* background color for selected checkbox */
-fx-background-color: lime;
}
.check-box > .box {
/* background color of unselected checkbox */
-fx-background-color: red;
}
.check-box:selected > .box > .mark,
.check-box:indeterminate > .box > .mark {
/* modify mark color */
-fx-background-color: blue;
}
I've managed to change the Logo the way I want it using Logo using CSS but I'm struggling to figure out how to change the hover color of it.
I want to change the TEST color on hover from blue to something else
http://test.peterstavrou.com/
At the moment my CSS code is
header#top #logo {
letter-spacing: 2px;
font-size: 35px;
}
your Logo-Text is a link so you should use css-syntax for styling links:
a#logo:link { color: #fff; } /* a Link that has not been clicked yet */
a#logo:visited { color: #fff; } /* a link that has been clicked before */
a#logo:hover { color: #ff0; } /* a link on hover/rollover */
a#logo:active { color: #ff0; } /* a link that is just clicked */
Just do something like:
Solutions 1 Find the logo hover css and change the color property value to whatever color you want
color: red!important; /* change the property value to the color you want */
Solution 2 Create another hover CSS and force a change as shown below, if the above doesn't work
#logo:hover {
color: red!important;
}
Note: Make sure the code above is at the very bottom of your css file. that way, it will override the previous hover property defined, even if it has important
Add this below the code for header#top #logo { ... } that your sample is showing in the CSS.
header#top #logo:hover
{
color:red;
}
How to give custom style to dojo ValidationTextBox?
We need to override the default css applied to dojo ValidationTextBox. Currently when the field is required, it shows some yellow background and a exclamation mark around the textbox.
See below
Or is it possible to remove the yellow background and the exclamation mark and just keep the tooltip error message?
.tundra .dijitSelectError .dijitButtonContents,
.tundra .dijitTextBoxError,
.tundra .dijitTextBoxError .dijitButtonNode {
border-color: #d46464;
}
.tundra .dijitError {
background-color: #d46464;
}
.tundra .dijitValidationTextBoxError .dijitValidationIcon {
background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=5') no-repeat -55px -66px;
}
http://jsfiddle.net/cswing/Yytzj/