I want to change the text color when an Ant Design Radio button is disabled. I have been trying things like this...
.ant-radio[disabled]:active {
color: $g06;
}
Which haven't worked.
Add the folowing css.
.ant-radio-disabled + span {
color: #ea6262;
}
Screenshot
Related
How can I change ant design date picker placeholder color? I couldn't find CSS for placeholders color
https://ant.design/components/date-picker/
As far as I can see, you can try the next selector for it:
.ant-picker-input>input::placeholder {
color: red;
}
Quick question:
Is there a way to add class and/or ID of the elements in the path of TinyMCE status bar under content?
TinyMCE has no such capability built into its status bar. If you wanted to add that you could do so by modifying the code. I would note that with any type of longer ID or Class labels that status bar will get filled up quickly which is why it does not do so by default.
The Elements in the Statusbar have a bunch of classes from Tiny Editor, you can examine it in the browser (chrome or firefox) with f12.
From there, it is no problem to override the current styling with some code like
.mce-statusbar.mce-container {
position : relative;
height : 0;
margin-top : -20px;
opacity : 0.5;
background-color :#fff;
border : 1px solid #333;
}
Beside, you can manipulate the code, where content is written in the Statusbar. See Plugin Wordcount for example. They are using some code like this to update the statusbar and enter a class name:
if (statusbar) {
Delay.setEditorTimeout(editor, function () {
statusbar.insert({
type: 'label',
name: 'wordcount',
text: ['Words: {0}', getCount()],
classes: 'wordcount',
disabled: editor.settings.readonly
}, 0);
editor.on('setcontent beforeaddundo undo redo keyup', debouncedUpdate);
}, 0);
}
When I added a dhtmlxEditor type, it shows only basic editor control button such as bold, italic, underline and erase.
ex)
{ type:"editor" , name:"notice", label:"Notice", labelWidth:600, inputWidth:600, inputHeight:279, labelLeft:25, labelTop:50, inputLeft:25, inputTop:71 }
How can I use toolbar option with full control buttons provided?
You need to add property
{ ... toolbar: true ... }
1) I would change the input placeholder color in some condition using javascript (not CSS if it will change the placeholder color forever)
2) And I want that the placeholder change to another placeholder onmouseover the input box.
I got this function:
if(email.value==''){
email.style.borderColor = "#FF0000";
email.setAttribute('placeholder',"Plea… fill this required field");
//code for changing the placeholder color
//code for changing the placeholder onmouseover
}
1) The placeholder color for me usually is "#C9C9C9" I want to change it to another color by this code.
2) I want the placeholder text to change to any other text onmouseover.
I will be thankful for the one who will give me the code.
Thanks
Look with this post's answer to do it in CSS : Change an HTML5 input's placeholder color with CSS
Then, you can include the CSS rule with javascript.
And you just have to use pseudo-class :hover for the mouseover.
Just like that :
CSS
input.formInvalid::-webkit-input-placeholder {
color: red;
}
Javascript
document.getElementById("yourElementId").className += " formInvalid"; //add the class .formInvalid to your element
Is it possible to animate a background color change with toggleClass?
Here is the page working currently. - this has been updated since first post
Is it possible to animate this? I have to use toggleClass instead of the JQuery UI extended animate because there are background-images in the original CSS and animate will change the background-color, but not remove the background-image. Plus, I want to toggle it, not change the background-color permanently.
Here is the current javascript:
function ToggleClass() {
$("#Section2").toggleClass("errorpanel");
$("#Secion2HeaderText").toggleClass("errortext");
}
Secondly, as you see, I have to change the CSS files twice. I can't understand why this class for the
.errorpanel{ color: #ffffff !important; background: red !important;}
does not endtend down to the tag. It will change the accordion header to white when it is not selected, but when it is selected, it leaves the background as red, but changes the color to the original shade of blue. I can override that and get it to stay white all the time by adding this class:
.errortext{color: #ffffff !important;}
Anyway, I would like to animate those both forward and back.
Edit:
I am thinking something like this:
function ToggleClass() {
var color = $("#Section2").css("background-color");
if (color == 'rgb(255, 0, 0)') {
$("#Section2").animate({ backgroundColor: "#507CD1" }, 2500);
$("#Section2").toggleClass("testerrorpanel");
}
else {
$("#Section2").toggleClass("testerrorpanel");
$("#Section2").animate({ backgroundColor: "red" }, 2500);
}
$("#Secion2HeaderText").toggleClass("errortext");
}
That looks to see if the background is red. If it is, it changes the background color back to the original value, with the background image (and the panel still changes to a lighter color when selected, so all original functionality is returned), it just doesn't animate back to blue. The only thing the toggle does now is remove the background image because that can't be animated. This page shows the current functionality.
You could try using delay
$("#Section2").animate({ backgroundColor: "red" }, 2500).delay(800).animate({ backgroundColor: "#507CD1" }, 2500);
Not 100% sure but I think this may work.