CODEWITHSUNDEEP
jquery
user744587
user744587

Reputation:

how to change BG color of <input type="button" />

I have a web page on which there are several buttons and i want to change it's color when it is selected. There is an example of jQuery, please take a look. I want to do the same but i bit confused.

my HTML page is as :

CSS : .blackButton {   
    background: url("Black_button.jpg");  
    vertical-align: middle; 
    margin-top: 1%;   
    margin-bottom: 1%;  
}


<div id="id1">
    <input type="button" class="blackButton"/>  
</div>

<div id="id2">
    <input type="button" class="blackButton"/>
</div>

<div id="id3">
    <input type="button" class="blackButton"/>
</div>      



js : I just tried, but not working
  $(function() {

         $(".blackButton").selectable();
      });

Upvotes: 2

Views: 1061

Answers (3)

zatatatata
zatatatata

Reputation: 4821

Add this javascript, and a css rule for .selected and you should get the desired result.

$(function(){
    $('input.blackButton').live('click', function(e){
        var t = $(e.target);
        if (!t.hasClass('selected'))
            $('input.selected').toggleClass('selected');
        t.toggleClass('selected');
    });
});

Created a jsfiddle.

Upvotes: 2

Kalle H. V&#228;ravas
Kalle H. V&#228;ravas

Reputation: 3615

Even though Zafa is on-point, I will add my own version: http://jsfiddle.net/hobobne/me7wf/

If you tell me your next step, I can add it to the example. In a form and submit? Save some setting via ajax? etc

Upvotes: 0

Sergey Metlov
Sergey Metlov

Reputation: 26301

Change background-color CSS style on clicking the input. You can do it by toggling CSS class. For example:

$(function(){
    $('.blackButton').click(function(){
        var elem = $(this);
        elem.toggleClass('selected-item-class-name');
    });
});

Upvotes: 0

Related Questions