ASP.NET
When TextBox1.Enabled = false; it has a gray background in FF3, but no change in IE8 or Chrome. So it's harder to tell if it's disabled or not. Is there any more general way to make the disable textbox rendered more consistent on a top-level? So I don't need to change this for every page or every website? Please advise, thanks.
You could set a CSS style to handle disabled text controls to render them consistently. For example, something like the following:
input[type="text"][disabled] {
background-color: #ECECEC;
border: solid 1px #7F9DB9;
color: #CCCCCC;
}
For IE7 support (and possibly even IE8), a !DOCTYPE must be specified or CSS attribute selectors will not work. Unfortunately, if you require support for IE6 this will not work and you have to use a CSS class on any text input instead.
You can assign a CSS class to it using the CssClass property and control it as much as you want.
More on the CssClass property here.
Sample CSS:
.DisabledTextBox {
background-color: #C0C0C0;
border: solid 1px #A0A0A0;
color: #A0A0A0;
}
Then use the CssClass like this:
<asp:TexbBox id="DisabledTextBox" CssClass="DisabledTextBox" value="Some Value" />
Related
Is it possible to change the layout of a checkbox without adding the label tag in CSS?
Things like this do not have any effect:
input[type=checkbox][disabled] {
background-color: green;
border: 10px solid red;
}
The only thing I found so far is how to change the opacity.
I'm not sure if this will be much use to you, but it does allow you to "style up" a checkbox without the need for a label. I've remove the disabled flag so you can swap between the different styles. Shouldn't be difficult to add it back in if this will work for you.
Fiddle is here.
input[type=checkbox]:checked:before {
background-color: green;
border: 10px solid red;
}
input[type=checkbox]:before {
content:'';
display:block;
height:100%;
width:100%;
border: 10px solid green;
background-color: red;
}
The above only works on Chrome, however, it seems like Chrome is in the wrong where the specification is concerned.
A fuller answer here: CSS content generation before or after 'input' elements
As of today there is no solution, if we assume a cross browser functional styling, to style the <input type="checkbox" > alone, other than a few properties like opacity, width, height, outline (and maybe a few more).
Using a label (or other content elements) is what you need to do that and here is a good (which this question is likely a duplicate of) post with lots of options: How to style checkbox using CSS?
Note: If you know more properties, feel free to update this answer.
I'm trying to style tag in html using css. It works in Firefox properly but not in chrome. Here is the code i use in styling forms. After referring some through internet I used !important; command along with this style sheet. But it did not worked.
.style {
display: block;
border: none;
color: #333;
background: transparent;
border-bottom: 1px dotted gray;
padding: 5px 2px 0 2px;
width:300px;
font-size: 14;
color:#FFF;
}
.style:focus{
outline: none;
border-color: #51CBEE;
}
simply? you can't.
Firefox allows you to do some styling on a <select>, but is not consistence along browsers.
You should go for a JavaScript masking solution if you really want the <select> to be styled crossbrowser.
Maybe Chosen or Selectize can help you.
Unfortunately there isn't yet a cross-browser compatible route of styling form elements with CSS: it's not usually left to the designer to have control over their appearance/behaviour so form elements are notoriously difficult to style. Many browsers specifically do not allow you to style them at all!
If you need to get a consistent look across all browsers, the only route is to use JavaScript to replace the form element in-view with stylised HTML elements.
Here's an article that lists a few of the options available for you: http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/
I'm playing around with a firefox extension written in XUL, and wanted to customize the style of a textbox element.
Here is what I've come so far (CSS file) :
textbox.custom-style {
-moz-appearance: none;
border-radius: 3px;
box-shadow: 0 1px #CCC inset;
background: #FFF;
border : solid 1px #CCC;
}
The style applies correctly but when I've added this rule to alter the style a focused textbox, it doesn't seem to work.
textbox.custom-style:focus {
border : solid 1px #ACC;
}
I've tried the same rules for a button element and it seems to work OK (when I 'tab' to the button, it gets focus and change its style as expected)
So what am I missing here? Is this a known bug? I've looked around for a bug report or a workaround but to no avail.
For <textbox> element, a special attribute focused is added whenever the element has the focus. You can check for the presence of this attribute to determine if the element has the focus within a style sheet. It will have the value true.
This is because actually focus is in <html:input> element which is inside <textbox> element.
I've been trying to apply some custom style to my ListBoxes but the styles are not applying the following is the CSS
.gwt-ListBox{
background: #fff;
border: 1px solid #96CAEA;
}
I've inspected my code in IE and what i understad is instead of solid it is picking inset from Standard.css, I also tried using new css class like
.listBox{
background: #fff;
border: 1px solid #96CAEA;
}
and this also giving same result what's wrong in my approach,
Thanks,
GWT has concept of themes.
If you have inherited a Theme it will override your styles. Use firebug to find computed styles, stylesheets downloaded and styles applied. Once you see firebugs information it would be easy to fix it.
If would be easier to use clean theme in GWT if you need to do a lot of customization.
If you are using standard theme and are stuck with it. You would need to use !important tag in your .listbox stylename
.listBox{
background: #fff;
border: 1px solid #96CAEA !important;
}
The use of !important is considered a bit un-tidy or hackey approach :)
Try using the following to solve your border issue
border: 1px solid #96CAEA !important;
You can set a proprity of UIOBject to clear the ListBox Primary CSS theme and add your own theme like you want.
E.g
ListBox list = new ListBox();
list.setStylePrimaryName("listBox");
Property JavaDOC
"Sets the element's primary style name and updates all dependent style names."
Note: You need to add this css on your ui file, or you can create a CSSResource to referenciate your CSS file
interface ListBoundle extends ClientBundle{
ListBundle INSTANCE = GWT.create(ListBundle.class);
interface ListBoxCssResource extends CssResource {
String listBox();
}
#Source("package.listBox")
#CssResource.NotStrict
ListBoxCssResource css();
}
Then set the property pointing to the
String listBox();
like
ListBox list = new ListBox();
list.setStylePrimaryName(ListBoundle.ListBoxCssResource.listBox());
To use inside the UiBinder, you have to use the tag.
E.g
<ui:style>
.gwt-ListBox{
background: #fff;
border: 1px solid #96CAEA;
}
</ui:style>
<g:ListBox styleName="{style.gwt-ListBox}"/>
But using a external Resource work's better.
For more information read this
I have a button which is using a class formBtn
in css
.formBtn {color:#fff; background-color:#518ACD; border-color:#ccc #000 #000 #ccc; font- size:11px; font-weight:bold;}
in HTML
<html:submit styleClass="formBtn" value="Add"/>
Suggest me something so that I can use the same class name for a disabled button and show it in a different manner (say background-color:Grey). I may be using the style class like this
in HTML
<html:submit styleClass="formBtn" value="Disabled Add" disabled="true"/>
Use the :disabled pseudoclass.
.formBtn:disabled { background-color: grey; }
[attribute=value] selector should work IE7, don't know about IE6 if you care.
.formBtn[disabled=true] { background: gray}
If you have "Disabled" word in values you could do something like:
.formBtn[value~=Disabled] { background: gray}