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
Related
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
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;
}
I've enabled the legend on a amCharts v4 chart with the following code but I have issues with ellipsis:
// Add legend
chart.legend = new am4charts.Legend();
chart.legend.fontSize = 11;
// Truncate long labels (more than 160px)
chart.legend.labels.template.maxWidth = 160;
chart.legend.labels.template.truncate = true;
chart.legend.labels.template.fullWords = true;
// Set custom ellipsis as default one is not displayed correctly
chart.legend.labels.template.ellipsis = "...";
// Set tooltip content to name field
chart.legend.itemContainers.template.tooltipText = "{name}";
As you can see I had to set a custom ellipsis property because Firefox v76 displayed €| instead of … on the truncated legend labels. It happens even on the sample on the amChart website but, surprisingly, not if I open the same URL in a private tab... How can I fix that?
Then I would like to display the tooltip on the legend only for truncated labels. Adding an adapter:
chart.legend.itemContainers.template.adapter.add("tooltipText", function(text, target) {
// 'text' here contains the non-truncated string
return "My modified " + text;
})
of course works, but how can I identify inside the adapter code if the label that I'm processing is truncated and clear the text variable? It doesn't make sense to display tooltips for non-truncated legend items.
Not sure the most ideal way but...
You get the text inside the adaptor callback.
You can add a text.length check like:
chart.legend.itemContainers.template.adapter.add("tooltipText", function(text, target) {
// 'text' here contains the non-truncated string
return text.length > someValyeBasedOnMaxwidth> ? "My modified " + text: "";
})
I found the answer about the tooltip adapter; this works:
chart.legend.itemContainers.template.adapter.add("tooltipText", function(text, target) {
if (!target.dataItem.label.isOversized) {
// Legend label is NOT truncated, disable the tooltip
return "";
}
// Legend label is truncated, display the tooltip
return text;
})
Still I don't know why the ellipsis are not displayed correctly without setting the property...
I have a jquery-ui button and I know how to change the styling between states with css, but I would like to know how to change the label text too. For example, an ON/OFF button like below -- when [checked="checked"] then the label text would = "ON" (and OFF when not checked).
<input type="checkbox" id="device_4_state" name="device_4_state" class="toggle-button on-off" checked="checked" />
<label for="device_4_state">ON</label>
Any help would be tremendous. Thanks.
here is the solution :
$('#device_4_state').change(function(){
if ($("#device_4_state").is(':checked'))
{
$("label[for='device_4_state']").text("ON");
}
else
{
$("label[for='device_4_state']").text("OFF");
}
});
If you wish to use pure CSS to set the label text, you can use CSS pseudo elements to automatically generate the content of the label based on the state of the jquery-ui button. To use this approach, leave the label empty (<label for="device_4_state"></label>) and include CSS like this:
.on-off + label > span:before {
content: "OFF";
}
.on-off + label.ui-state-active > span:before {
content: "ON";
}
As in this jsfiddle: http://jsfiddle.net/GjPXZ/1/
In my app there is field change font Actually using that user can change the font of whole application.Is this possible actually if i have 100 field in my project (may be different different font size on every page ).How can user change the font size .so that it can reflect on whole application.As I goggled i found that there is functionality of zoom in and zoom out .It is not a good way to do that .? is there any way to change font of whole application?
You can create a style dynamically and apply it to all elements within body.
Demo
$('#select_font').on('change', function () {
var style;
var font = $(this).val();
if ($('head').find('style.font').length === 0) {
style = $('<style class="font">.font { font-size: ' + font + ' !important; }</style>');
$('head').append(style);
$('body *').addClass('font');
} else {
$('body *').removeClass('font');
$('style.font').empty();
style = '.font { font-size: ' + font + ' !important; }';
$('style.font').append(style);
$('body *').addClass('font');
}
});
This article shows a nice way of doing it in CSS only.
http://joshnh.com/2011/07/26/are-you-using-ems-with-your-media-queries/
Key is to only using em, then you can switch font size globally by changing the base for em.