I'm developing some CSS editor and want to provide ability to change style for <button> when it's clicked. The following code doesn't change background-color to yellow.

/

$('a').click(function() {
    event.preventDefault();
    $('button:active').css('background-color', 'yellow');
});

Edit: In my case, I can't assign specific class to a button, because it's user customizable html.

I'm developing some CSS editor and want to provide ability to change style for <button> when it's clicked. The following code doesn't change background-color to yellow.

http://jsfiddle/65erbrhh/

$('a').click(function() {
    event.preventDefault();
    $('button:active').css('background-color', 'yellow');
});

Edit: In my case, I can't assign specific class to a button, because it's user customizable html.

• javascript
• jquery
• html
• css

• So how do you deactivate a button in your case? css? – callback Commented Mar 28, 2015 at 0:32
• There is no need to deactivate, user can use same colors for :active state – scorpio1441 Commented Mar 28, 2015 at 1:13

1 Answer 1

Since you can't select elements based on their CSS state, one option would be to add a class to the element:

Updated Example

$('a').click(function (e) {
    e.preventDefault();

    $('button').addClass('active-style');
});

button.active-style:active {
    background-color: yellow;
}

But since you said you can't do that, you could alternatively attach an event listener for the mousedown/mouseup events and change the background color accordingly:

Updated Example

$('a').click(function () {
    event.preventDefault();

    $('button').on('mousedown mouseup', function (e) {
        $(this).css('background-color', e.type === 'mousedown' ? 'yellow' : '');
    });
});

..but if you want the example to work if you mouseup outside of the button element, you would need to listen to all mouseup events:

Updated Example

$('a').click(function (e) {
    e.preventDefault();

    $('button').addClass('active-style');
});

$(document).on('mousedown mouseup', function (e) {
    var color = (e.type === 'mousedown' && $(e.target).hasClass('active-style')) ? 'yellow' : '';
    $('button.active-style').css('background-color', color);
});