We have a huge ASP.Net web application in C#. It is now required that the fontcolor of the text in disabled textboxes be changed. The problem is that most of the textboxes have the "disabled" attribute set and not "readonly". If I change the attribute to "readonly", i will have to modify all the places in the javascript code where checks like
if(document.getElementByID('Element1').disabled == 'true') etc exist. And these checks exists at 1000s of places. If start changing all these i will be trapped in a downward spiral, moving away from humanity, disapperaing into an abyss never from which i may be able to come out. Please help me on this.
I should add that i need it to work only for IE8. Thanks.
The following worked for me:
input[disabled] {
background-color: GrayText !important;
color: White !important;
}
Unfortunately, you can not change font color of disabled text box in IE8.
Related
Where can I find the aspNetDisabled class default properties system color values? A ddl/select control background property is not "grayed" out when ddl.Enabled=false. For aesthetic purposes I want it to look similar to other disabled controls.
I can change the background of a DDL in the css with:
Select.aspNetDisabled
{
background-color:ScrollBar;
}
Setting all background colors to the same value like this:
.aspNetDisabled
{
background-color:ScrollBar;
}
[surprisingly but makes sense now] is not a solution. Radio buttons and checkboxes have more than its "input area" grayed since the background for them consists of more than an input area. A rb becomes a grayed out square with a grayed out circle. I have tried ever possible SYSTEM COLOR that is available in VS2010 style builder color picker and none of them match. I can view the source and get the color there, but a hard coded value will not necessarily be identical on different machines. I like the default functionality of the aspNetDisabled class and only need to override the background for ddl's.
The aspNetDisabled deafult grayed out system color is "ButtonFace [in .css and buttonface from source]! I wrote a Javascript function to get the background color of a disabled TextBox. I tried the same code yesterday, but failed because of browser specific Javascript functions.
Chrome did not like the property string I was passing to currentStyle[] - received an undefined property error:
var txtBx = $get('<%=txtBx.ClientID %>');
var prop = "background-color"; //also tried backColor and many other variations
strValue = txtBx.currentStyle[prop];
alert("strValue" + strValue);
The getComputedStyle method worked, but of course that is not what I wanted. I ran the same Javascript using ie and was able to get the currentStyle[prop] value.
aspNetDisabled is simply a variable for a class/.css. It would be nice to be able to see its values. I searched the Framework and the "net" yesterday for any related .css files/classes and for the string "aspNetDisabled". The only matches I encountered were aspNetDisabled in WebControls.cs and a WebAdminStyle.css under the 4.0 dir. I also tried to use the debugger, but could not find the style properties for "txtBX" as I expanded each layer.
I guess writing Javascript a function to loop through all properties for each type of "disabled" control would accomplish that. There is probably a way to write a .net class to find all properties and their values of a .css class too.
It is unclear to me why the background color of a DDL does not get modified when disabled...
I hope this helps someone!
I have a login box, where I want the browser to remember the saved password if the user chose to do so, but when a password is actually saved, the form starts looking really ugly:
is there a way to override this behavior? In Firefox and IE it looks normal. In Chrome and Opera it looks really bad.
And yes, I do know "remmember" is misspelled :P
From the picture it looks like you are using images for the design of that input field. You should be able to use border-radius to get the effect you want without using images. Check out http://inspectelement.com/didyouknow/rounded-corners-on-input-fields-in-almost-all-modern-browsers/ for an example.
If you use border-radius, the yellow background that Chrome inserts (which is intended to indicate to the user that the form was prefilled), should fill the entire input field and be rounded.
For browsers that don't have border-radius, you can use the images. Since this problem is only in Chrome, and Chrome supports border-radius, it should work. Check out http://www.modernizr.com/ for help gracefully degrading depending on what HTML5/CSS3 features are available.
jquery based js solution, it is not ideal but works. Chrome change the style and than the js return it to your styles.
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('input:-webkit-autofill').each(function(){
var text = $(this).val();
var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name=' + name + ']').val(text);
});
});
}
A possible workaround for the moment is to set a "strong" inside shadow:
input:-webkit-autofill {
-webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
}
I have a Flex Spark Button that I've changed the background to a dark color using
s|Button {
color: #66ffff;
chromeColor: #333333;
}
The problem is that when the button is disabled, it's very hard to read (the text color and background color are very close). I've tried setting the disabled color to something lighter
s|Button:disabled {
color: #ffffff;
}
But the disabled text's color is not #ffffff. It's some combination of the text color and the background. Is there someway to disable this behavior (ie, specify the exact disabled state's text color)?
You are battling with the default skin of the button. If you were to create a new button skin based on ButtonSkin, you would see that the alpha for the entire skin is set: alpha.disabled="0.5".
Setting the value to 1.0 solves your problem, but it seems overkill to define this entire skin just to modify this single value.
Hopefully, there is a more elegant way. I tried setting alpha: 1.0; in the disabled style, but it doesn't take. The only thing I have been able to do is create a new button style, set alpha.disabled="1.0" and telling the button to use that slightly modified style.
You can create 2 .css files, one for the standard view and one for the "disabled" view and set your own button properties. Write a function which changes the .css file to use.
I am using asp.net 3.5 and C#.
I want to change my mouse cursor similar to this site
http://dummyblogtrix.blogspot.com/
How can I do the same ?
Please help.
Thanks in advance
Don't. Just Don't.
Or set the cursor style on the body tag.
In order to set a 'special' non-windows icon, you have to reference a URL to a cursor icon (.cur).
body
{
cursor:url(customCursor.cur);
}
However, I highly recommend you do not set a custom cursor. It will only serve to annoy users.
I do believe this will cause all other pointers to be overridden. I.e. your anchor tags would also use the custom icon. If you wanted to keep the standard icon, you'd have to set the cursor on all the other standard html tags, i.e.:
a
{
cursor:pointer;
}
Use the CSS cursor attribute
CSS Cursor
W3C
Im trying to override the grey text of a disabled input and textarea. At the moment Im only really concerned with it working in Webkit and Mozilla. At the moment Im currently using every trick in the book that I know of:
input[#disabled=true], input[#disabled],
button[disabled]:active, button[disabled],
input[type="reset"][disabled]:active,
input[type="reset"][disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
select[disabled] > input[type="button"],
select[disabled] > input[type="button"]:active,
input[type="submit"][disabled]:active,
input[type="submit"][disabled],input[disabled="disabled"], input[disabled] {
color: black !important;
}
Sure it does change the colour if I change it to something else, however when I choose black it is still greyed out a bit.
Any ideas? I am using Ext JS if I can use that to manipulate it. Thanks.
input.button-control[disabled]
{
color: #cccccc !important;
}
Here button-control is a class on the input element, whose text is overriden to grey when the disabled attribute is set.
I hope this helps.
I would prefer to go the JavaScript way to achieve best browser compatibility. I would use the ExtJS [http://www.extjs.com/deploy/ext-1.1.1/docs/output/Ext.DomQuery.html][DomQuery] and insert the CSS rules by adding specific class or directly injecting them as style attribute values.