I need to style disabled <select>elements to make them look like they're enabled. Can someone help?
PS. I am all-too-aware of the downsides of doing this sort of thing vis a vis HCI principles etc., but its a requirement so I've got to do it if it is possible ...
Thanks.
EDIT:
#AlexThomas' method works well when the elements are disabled in HTML code but unfortunately I'm doing the disabling/enabling with JQuery:
<select class='dayselector'>
<option>Monday</option>
<option>Tuesday</option>
<!-- .... etc. -->
</select>
$(".dayselector").attr("disabled",true);
$(".dayselector").attr("disabled",false);
So the selector:
$(".dayselector") //works and gets all the selects
and
$(".dayselector option") //works and gets all the selects' option items
but
$(".dayselector [disabled='true']") //doesn't return anything.
and
`$(".dayselector [disabled='false']") //doesn't return anything.
Is there something I'm missing?
You could either go with
select[disabled] { }
(not supported in <IE7)
or
select:disabled { }
(not supported in <IE9)
Maybe you should use readonly instead of disabled. This will make the input enabled, but without allowing the user to change its value.
Using jquery:
$('option[disabled="true"]').each(function () {
$(this).attr('style', 'color:red');
});
check it in action here http://jsfiddle.net/GfNve
Related
I tried lots and search numbers of time but I didnt get any solution to disable click on div element. Already question has been asked but they are saying not possible on divs and I want to know only, is there any ways to disable div in angular2
<div>(click)="isDisabled ? $event.stopPropagation() : myClickHandler($event); isDisabled ? false : null"
[class.isDisabled]="isDisabled"></div>
And the old answer not clearly about disabling divs and pointer-events:none is not supported in old version browser also it become editable from network tab
You can use css:
pointer-events:none
Or maybe could do something like:
<div (click)="false; $event.stopPropagation();"> </div>
There are several ways of preventing a click, depends on what you need
The straightforward answer here will be just not to render the function if the element should be disabled. Something like this:
<div (click)="shouldBeDisabled ? null : callYourFunctionHere()"></div>
But a better solution will be to put this condition into your function itself
HTML
<div (click)="callYourFunctionHere()"></div>
TS
const callYourFunctionHere = () => {
if (this.shouldBeDisabled) return
//if statement above is false your general logic will be rendered
}
If I create an HTML anchor tag and set the disabled attribute to true, I get different behaviors in different browsers (surprise! surprise!).
I created a fiddle to demonstrate.
In IE9, the link is grayed out and does not transfer to the HREF location.
In Chrome/FF/Safari, the link is the normal color and will transfer to the HREF location.
What should the correct behavior be? Is IE9 rendering this incorrectly and I should implement some CSS and javascript to fix it; or is Chrome/FF/Safari not correct and will eventually catch up?
Thanks in advance.
IE appears to be acting incorrectly in this instance.
See the HTML5 spec
The IDL attribute disabled only applies to style sheet links. When the
link element defines a style sheet link, then the disabled attribute
behaves as defined for the alternative style sheets DOM. For all other
link elements it always return false and does nothing on setting.
http://dev.w3.org/html5/spec/Overview.html#the-link-element
The HTML4 spec doesn't even mention disabled
http://www.w3.org/TR/html401/struct/links.html#h-12.2
EDIT
I think the only way to get this effect cross-browser is js/css as follows:
#link{
text-decoration:none;
color: #ccc;
}
js
$('#link').click(function(e){
e.preventDefault();
});
Example: http://jsfiddle.net/jasongennaro/QGWcn/
I had to fix this behavior in a site with a lot of anchors that were being enabled/disabled with this attribute according to other conditions, etc. Maybe not ideal, but in a situation like that, if you prefer not to fix each anchor's code individually, this will do the trick for all the anchors:
$('a').each(function () {
$(this).click(function (e) {
if ($(this).attr('disabled')) {
e.preventDefault();
e.stopImmediatePropagation();
}
});
var events = $._data ? $._data(this, 'events') : $(this).data('events');
events.click.splice(0, 0, events.click.pop());
});
And:
a[disabled] {
color: gray;
text-decoration: none;
}
disabled is an attribute that only applies to input elements per the standards. IE may support it on a, but you'll want to use CSS/JS instead if you want to be standards compliant.
The JQuery answer didn't work for me because my anchor tag is on a form and on my forms I use asp field validators and they just weren't playing nice. This led me to finding a pretty simple answer that doesn't require JQuery or CSS...
<a id="btnSubmit" href="GoSomePlace">Display Text</a>
You can disable the element and it should behave as input types do. No CSS needed. This worked for me in chrome and ff.
function DisableButton() {
var submitButton = document.getElementById("btnSubmit");
if (submitButton != null) {
submitButton.setAttribute('disabled', 'disabled');
}
}
Of course you'll be doing a loop to disable all anchor tags in the DOM but my example shows how to do it for just one specific element. You want to make sure you're getting the right client id of your element but this worked for me, on more than one occasion. This will also work on asp:LinkButtons which end up being anchor tag elements when rendered in the browser.
I have looked all over and can't figure this out: how do you target the disabled state submit button in css?
For example: How would I target and style this button:
<input value="Validate" disabled="disabled" type="submit"/>
CSS3 adds the :disabled pseudoclass, which exactly does what you want.
input:disabled {
/*Disabled styles for input elements here*/
}
As this page shows all major browsers (except IE8) support this tag, so it seems unusable yet (unless you do not need IE support)
You can use:
input[disabled=disabled][type=submit] {
background:green;
}
Works on Firefox and is reportedly good on all but IE6. But I haven't personally tested this kind of combo selector.
PS: A more robust, cross-browser method, using jQuery...
$("input[disabled=disabled][type=submit]").css
({
'background': 'yellow',
'color': 'blue'
});
input[disabled='disabled'][type='submit']
{
...
}
doesn't work in IE 6 but should in all other browsers. Reference
There is also the :disabled pseudo-class but that's not supported in IE at all.
Styling disabled elements is difficult, as they sometimes have properties that can't be overridden. This article shows what stylings apply in which browsers: Styling disabled form controls with CSS
There is no pseudo class defined in CSS for a disabled state.
My guess is to use JQuery to change the CSS class for the disabled buttons.
Code for JQuery:
<script language="javascript">
$('input[type=button]').each(function () {
if ($(this).attr('disabled') == true)
{
$(this).addClass('disabled');
}
});
</script>
Add a style element 'disabled'.
One way I can think of for this is by setting the class of the button to disabled and then using "input.disabled" to specify the appropriate CSS. Would that work in the context you are doing this?
For your exact syntax, #Brock Adam or #Pekka's answer should work, but usually, the syntax for disabled input or button is:
<input disabled type="submit"/>
With this, you could do the following to target the disabled property:
button:[disabled] {}
input:[disabled] {}
Also, because it was what I needed in my case, below can help achieve the reverse (targeting only buttons or inputs that aren't disabled):
button:not([disabled]) {}
input:not([disabled]) {}
I have a select box (for a customer field) on a complex order form, when the user starts to add lines to the order they should not be allowed to change the customer select box (unless all lines are deleted).
My immediate thought was that I could use the disabled attribute, but when the box is disabled the selected value is no longer passed to the target.
When the problem arose a while ago one of the other developers worked around this by looping through all the options and disabling all but the selected option, and sure enough the value was passed to the target and we've been using since. But now I'm looking for a proper solution, I don't want to loop through all the options because are data is expanding and it's starting to introduce performance issues.
I'd prefer not to enable this / all the elements when the submit button is hit.
How can I lock the input, whilst maintaining the selected option and passing that value to the target script? I would prefer a non-JavaScript solution if possible, but if needed we are running jQuery 1.4.2 so that could be used.
Edit
I've tried to use the readonly attribute with little success, here's the jQuery code I'm using:
$('.abc').each(function(element) {
$(this).attr('readonly','readonly');
});
When inspecting the element with Firebug the readonly attribute had been set, but I can still change the value in the select box?!
This works:
$('.abc :not(:selected)').attr('disabled','disabled');
jQuery will still be looping through the elements behind the scenes, but I seriously doubt you will have performance issues unless your select has thousands of elements (in which case your usability issues will far out weigh the performance issues). The original code must have been doing something wrong.
This works fine
<select disabled="true">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">thre</option>
</select>
Add a hidden field to your form and onsubmit take the value from the select and place it in the hidden field's value
As per the HTML spec, readonly is not supported by the select tag
The element does not accept readonly attribute. Readonly is a wrapper that fix this.
Try this:
https://github.com/haggen/readonly
"select" does not have a readonly attribute. It has only disabled attribute.
http://www.w3schools.com/TAGS/att_select_disabled.asp
So your best best is:
$('.abc').each(function(element) {
$(this).attr('disabled','disabled');
});
HTH
I'd have an idea, that was functional to me:
In my case, when a user selects an option (an account) in a drop-down on a form of an accounting system, e.g., some kind of "expense", that I know that may not be "credited", just "debited", another drop-down that selects the accounting operation (Debit/Credit), changes these drop-down to "Debit".
Then, I "lock" (using "disabled=true") these last "drop-down" in the "debit" option.
The problem that occurred to me these moment, was similar of yours: after disabling the drop-down element, I couldn't receive it in the target, anymore.
So, what I've done:
1 - Changed the option in the second drop-down list, as I said:
document.getElementById("operation").value = "D";
`
2 - Disabled that dropdown:
document.getElementById("operation").disabled = true;
Then, the "cat salt":
3a- Added to the "FORM" element, an "onsubmit"
onsubmit = "validForm()"
3b - On my [java-script] file I added the ["valid-Form"] function:
function validForm()
{
document.getElementById("operation").disabled = false;
}
Voilá!
A simple way to disable any Select is to just disable mouse interaction.
For example:
<select id="complaint_status" name="complaint_status" class="disabledSelect" value="Pending">
<option value="Pending" selected>Pending</option>
<option value="Complete">Complete</option></select>
css
.disabledbutton {
pointer-events: none;
opacity: 0.4;}
The value of Select will be SUBMITted.
Hope it works!!
Can I replace the maxlength attribute with something in CSS?
<input type='text' id="phone_extension" maxlength="4" />
No.
maxlength is for behavior.
CSS is for styling.
That is why.
No. This needs to be done in the HTML. You could set the value with Javascript if you need to though.
You can use jQuery like:
$("input").attr("maxlength", 4)
Here is a demo: http://jsfiddle.net/TmsXG/13/
I don't think you can, and CSS is supposed to describe how the page looks not what it does, so even if you could, it's not really how you should be using it.
Perhaps you should think about using JQuery to apply common functionality to your form components?
Not with CSS, no.
Not with CSS, but you can emulate and extend / customize the desired behavior with JavaScript.
As others have answered, there is no current way to add maxlength directly to a CSS class.
However, this creative solution can achieve what you are looking for.
I have the jQuery in a file named maxLengths.js which I reference in site (site.master for ASP)
run the snippet to see it in action, works well.
jquery, css, html:
$(function () {
$(".maxLenAddress1").keypress(function (event) {
if ($(this).val().length == 5) { /* obv 5 is too small for an address field, just want to use as an example though */
return false;
} else {
return true;
}
});
});
.maxLenAddress1{} /* this is here mostly for intellisense usage, but can be altered if you like */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" class="maxLenAddress1" />
The advantage of using this: if it is decided the max length for this type of field needs to be pushed out or in across your entire application you can change it in one spot. Comes in handy for field lengths for things like customer codes, full name fields, email fields, any field common across your application.
Use $("input").attr("maxlength", 4)
if you're using jQuery version < 1.6
and $("input").prop("maxLength", 4)
if you are using jQuery version 1.6+.