I have a simple form with three fields. In it there is an email validation, which should change the text background color when the email to invalid.
However, the background color no change. The code changes the background color of the label, not the text background.
Is there any way to resolve this with just JavaScript?
Fiddle
You need to make 2 small changes to a single line
Ext.get('txtUsuEmail').setStyle('background-color','#DC143C'); //change this as per below
1) Target specifically the <input> textbox using Ext.get('txtUsuEmail-inputEl').
2) Change the background property not the background-color.
So the final would look like:
Ext.get('txtUsuEmail-inputEl').setStyle('background','#DC143C');
This should work.
You could give an id to the textfield and simply use the below setStyle:
Ext.get('YourTextFieldId').setStyle('background', '#ABCDEF');
Related
I know how to change the background color of a textarea, but what about changing the background color of the text that users type into a text area?
For example, in HTML you can change the background color of a span of text using span tags, ie:
<span style="background-color: blue">Words with blue background</span>
...But what about the text that users type into a text field?
I need to do this for a form that I'm creating, so that users can clearly see spaces and returns they're entering as well as the characters they enter.
Can it be done using CSS?
No.
But there is the other way around.
Did you ever used editor in github.com? It's cool.
It uses javascript and <div> to control the style of each line of code.
And translate.google.com uses the same way.
My splitButton should not have any text on the button. So when I try to achieve this using by providing blank value for the value attribute, the button shrinks to a very small size. I want it to remain the size of the dropdown button which appears beside it. I don't have an actionListener, therefore I need the button to display no text.
Is there no default size set to the button when it contains no text? Or is it possible to apply a style property to it?
Put the value attribute like this:
value=" "
Is there an easy way to change the background color of a Flex 4 spark Button without messing with skins?
UPDATE: ok, figured it out, simply set the chromeColor attribute of the Button mxml.
For spark components, you can use chromeColor style:
<s:Button chromeColor="0xff0000" label="chrome red"/>
You can change the color style of the button. You can also have a bitmap fill.
Update: The above methods do not change the background.
Easiest way to change the background, you can use - opaqueBackground property.
Here is another way to change the background of a button without changing its skin -
1. Create a group with a rectangle and your button.
2. Set opaqueBackground of your button to null.
3. Make width and height of rectangle to 100%
4. whatever color you fill the rectangle with is the background of your button.
This can also be done via code like :-
btnID.addEventListener(MouseEvent.MOUSE_OVER, textChange);
btnID.addEventListener(MouseEvent.MOUSE_OUT, textChangeback);
private function textChange(event:MouseEvent):void
{
btnLinkDelete.setStyle("color", 0xFFFFFF)
btnLinkDelete.setStyle("chromeColor", 0x535151)
}
private function textChangeback(event:MouseEvent):void
{
btnLinkDelete.setStyle("color", 0x000000)
btnLinkDelete.setStyle("chromeColor", 0xfcffff)
}
I am posting it, if anyone want to change background color on mouse hover.
i have a dropdown list and text box. i disabled both controls using code behind. now, at one sight we can understand the dropdown list is disabled , because the background color of drop down list is changed automatically.
i want to make that same background color to the text box control too. But i dont know what color code is that. i am working in asp.net . Any suggestions??
Try this
<asp:TextBox ID="txtCDate" runat="server" CssClass="textbox" BackColor="#efefef" />
Actually, the "disabled" color may vary depending on the browser ...
AFAIK, Firefox would put in a grey background to a disabled input box, and you could customize this behaviour via css with a selector like
input[disabled='disabled'] {
... styles go here ...
}
The problem is probably IE-specific, and in that case, this CSS selector would not work... You would probably need to add a specific CSS class to the disabled element to have more control over its look.
You could check this article about this issue : Shawn asks the CSS Guy about styling disabled text inputs
Assuming the reason the text box colors are different is because they have been explicitly set at some point during form validation.
To avoid having to explicitly set the grey color, and instead let the browser set the color to the "disabled" color automatically you could remove the custom color attribute from the text box.
"you can set the BackColor property to Color.Empty"
. . From a Similar Question answered by dustyburwell
In other words, something like myValidatedTextBox.BackColor = Color.Empty
I'm trying to change the background color and or text color of a BorderContainer in flex 4 using Action Script, but have not idea how to.
The Border Container component doesn't seem to have any properties like:
idname.color = "#333333";
idname.backgroundcolor = "#333333";
How might I go about doing this?
thanks!
You can set styles (which are different from properties) in ActionScript like so:
idname.setStyle("backgroundColor", 0xff0000);
Not sure if this is the only way to do it, but by creating a css style your able to change the background, text color, and other style attributes and call the style's name in Action Script.
idname.styleName = "css-stylename";