When I use .prop('disabled',true) to disable a button, it works, but the button does not look disabled. I remember in the old days when I used .attr('disabled','disabled') to disable buttons, they would become more visibly disabled, i.e. the text would be greyed out or something so the user wouldn't try to click. Now I think the button border fades a bit but the text is not.
What's the easiest way to get the old behavior back? I am lazy and don't want to write one line of code to disable the button and another to make it look disabled - I want to get both effects in a single command if possible. Should I use a different element other than a button? A different method of disabling?
I made a fiddle here: http://jsfiddle.net/ak2MG/. Here's the code.
HTML:
<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>
Javascript:
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true); } );
Or change the opacity of the button
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true).css('opacity',0.5);
});
Fiddle
I would add a disabled class to the button.
This lets you control the styling from CSS instead of javascript so all of your styling is in one place (where it should be).
Demo: JSFiddle
HTML
<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>
JS
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true).addClass('disabled');
});
CSS
.disabled {
color: #999;
}
it is pretty simple, just change the text style
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
my_button_disable(this);
});
function my_button_disable(btn) {
$(btn).prop('disabled',true);
$(btn).css('color', 'lightgray');
// put whatever else you want here
}
http://jsfiddle.net/ak2MG/6/
Simplest - Add a state in CSS
Target it with CSS to change the style,
importantly the pointer-events: none will make it unresponsive. :
button:disabled {
background: #F5F5F5;
color : #C3C3C3;
cursor:none;
pointer-events: none;
}
The change from attr() to prop() was only to the jQuery API and has nothing to do with any difference you are observing in the style of a disabled button.
A disabled button's style is decided by the browser. The fiddle you provided looks very "disabled" in Google Chrome (Version 33.0.1750.154 m). If you'd like to alter the style of a disabled button to your liking, I recommend adding a class OR styling based on attribute
button[disabled],
button.disabled {
color: #999;
background: #DDD;
border: 1px solid #CCC;
}
Related
Does anyone know, is it possible to show outline around input element when user is using sequential navigation (TAB button) and hide outline when user clicks this input element with the mouse? Has anyone implemented this kind of behaviour?
I`m using this property on my :focus selector in CSS file:
:focus {
outline: #00bfff solid 1px !important
}
Currently, outline appears when input element is focused.
BR,
Raimonds
Just blur it on click.
jQuery(document).ready(function() {
jQuery('input').on('click', function() {
jQuery(this).blur();
});
});
This should remove the focus from the input when clicked, thus un-triggering your css rule for :focus, while it will still be applied if your input gets the focus by keyboard navigation.
Edit: Just tried it in Chrome/Windows 7, it doesn't seem to achieve what it is supposed to.
If someone wants to give it a ride to find a working solution, here's a pen:
http://codepen.io/anon/pen/yNMoJv
Here is a fiddle https://jsfiddle.net/hyauyovm/2/
Hope it solves your problem
//HTML
<input>
<input>
<input>
<input>
//JS
<script>
$("input").click(function(){
$(this).addClass('focus');
});
$("input").blur(function(){
$(this).removeClass('focus');
});
</script>
//CSS
input:focus{
outline:2px solid blue;
}
input.focus{
outline:none;
}
you can do this either in js or css for js you have to use blur or in css you can use :focus. Here is an example of both.
using css
using css in fiddle
using js
using js in fiddle
for your case use this
Fiddle
Try this,
input:focus {
outline: #00bfff solid 1px !important
}
I'm trying to style the active state of jQuery spinner buttons like this:
.ui-spinner .ui-spinner-button:hover {
background: #FF0;
}
.ui-spinner .ui-spinner-button:active{
background: #0FF;
}
Hover is working, but active is not. See jsfiddle example here.
Please excuse the ugly colors - just have those for simplicity's sake.
Update: the issue is primarily in Firefox - it doesn't present itself in Chrome
I dont know how to do it in css tried some options but they dont work but i managed to solve it in jquery give it a try
$(".ui-spinner .ui-spinner-button").click(function(){
//background you want to be in active state
$(this).css("background","#111");
//reverse the background in 0.1 second
setTimeout(function(){
$(".ui-spinner .ui-spinner-button").css("background","#fff");
}, 100);
});
it works both in firefox and chrome, but you should remove the :active from css since it's going to work in chrome and you will get a mix of active state with the color specified in css and the one in jquery
It looks like jQuery's background image is taking precedence over background color in Firefox. Try this:
.ui-spinner .ui-spinner-button:hover {
background-color: #FF0;
background-image:none;
}
.ui-spinner .ui-spinner-button:active{
background-color: #0FF;
background-image:none;
}
Just replace :active pseudo-selector by :focus. See here: http://jsfiddle.net/xvWG5/92/
PD: I also replaced type="submit" by type="button" so I stay on the page.
Your new fiddle get fixed the same way. Checked: http://jsfiddle.net/xyb9fr35/2/
Same thing: replace :active by :focusand use #testSpinner as a selector instead of the class because that class is not in the DOM when the css is applied.
I have a image, when user clicks on it I am changing the background color of it. for ex:
HTML:
<img src="images/image1.png" />
CSS:
img:active{
background-color:red;
}
But the red color is not persistent. and the red color is replaced with the old color. How can I make it persistent ?
OnClick functionality isn't achievable solely through CSS. You will need to use javascript to achieve this.
Just use jQuery:
$('img').click(function(){
$(this).addClass('red');
});
then in css make sure you have something like this:
img.red {
background-color:red;
}
As others pointed out, you should use javascript with onclick event handler, save the clicked element's state and toggle at right time... However I would like to introduce this work-around without using any script, it uses some focusable wrapper (like a button) to mimic other unfocusable element (like the image) and use the :focus pseudo-class to style the active element (as you understand, it can be in such a state by clicking or tabbing):
HTML:
<button class="wrapper">
<img/>
</button>
CSS:
.wrapper > img {
background-color:inherit;
width:200px;
height:200px;
}
.wrapper {
border:none;
padding:0;
cursor:default;
}
.wrapper:focus {
background-color:red;
outline:none;
}
Here is the working fiddle, try clicking the image and then clicking on some point outside to see it in action.
I want to disable my all input element of a div by applying my custom css class.
but i could not find any css attribute which can disable an input element.
currently what am i doing
$('#div_sercvice_detail :input').attr('disabled', true);
$('#retention_interval_div :input').addClass("disabled");
which can disable all input element of div with css attr but i want to apply my custom class for disable all input with some extra css attributes
$('#retention_interval_div :input').addClass("disabled");
class
.disabled{
color : darkGray;
font-style: italic;
/*property for disable input element like*/
/*disabled:true; */
}
any suggestion for doing this with jquery without using .attr('disabled', true);?
There is no way to disable an element with just CSS, but you can create a style that will be applied to disabled elements:
<style>
#retention_interval_div​​ input[type="text"]:disabled {
color : darkGray;
font-style: italic;
}​
</style>
Then in your code you just have to say:
$('#retention_interval_div :input').prop("disabled", true);
Demo: http://jsfiddle.net/nnnnnn/DhgMq/
(Of course, the :disabled CSS selector isn't supported in old browsers.)
Note that if you're using jQuery version >= 1.6 you should use .prop() instead of .attr() to change the disabled state.
The code you showed is not disabling the same elements that it applies the class to - the selectors are different. If that's just a typo then you can simplify it to one line:
$('#retention_interval_div :input').addClass("disabled").attr('disabled', true);
You can use following css to practically disable the input:
pointer-events: none;
Using normal CSS
.disabled{
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
No. CSS can't disable an input element. CSS is for styling only, it can't do anything else. Also, input will only work with input, don't forget select, textarea, password
You need to do 2 things, so why not wrap them in a single function? You could even create a little plugin to do this:
(function ($) {
$.fn.disableInput = function () {
return this.each(function(){
$(this).prop('disabled');
$(this).addClass('disabled', true);
});
}
})(jQuery);
Then you can call it like this:
$('#myInput').disableInput();
...and even chain it with other stuff, like this:
$('#myInput').disableInput().addClass('otherClass');​
You can't disable input elements using css properties. But you can improve your current coding like following
$('#div_sercvice_detail :input').prop('disabled',true).addClass("disabled");
I have this in my CSS file that styles input fields in a form:
input,textarea,input,select,input,checkbox {
font-size:12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
color:#98925C;
background-color:#000;
border:1px solid #413E22;
}
When I use a disabled on the form though (eg the submit button when pressed), it doesn't grey out like it should.
I have this in the submit button HTML
onclick="this.disabled=true;this.value=' done ';this.form.submit();"
How can i make it so the button greys out once clicked?
It does gray out in IE. For other browsers, though, you need to specifically define your "disabled element" styles with:
:disabled {
color: #6b849a;
text-shadow: 1px 1px #ffffff;
cursor: default;
}
Something like that (although you may have to apply !important if there are cascading issues).
The issue is that your styles are overriding the browser defaults for a disabled form element.
You need to redefine the styles by specifying :disabled pseudoclass in your CSS.
Here's a jsFiddle that shows how it works.
input[disabled]{
styles here
}
Use the :disabled pseudoclass. This might not work in older browsers and will surely not work in IE, so you could also add a normal class to the form when disabling it.