0

I'm trying to customize the color of the button in jQuery UI by adding custom CSS to the <label> as seen here: http://jsfiddle.net/Akedf/3/

I would like to change the color of those buttons when they have been clicked on (preferably just using CSS). I've been looking a lot of StackOverflow (example one) and Google posts about changing color of the jQuery UI buttons, but none of them seem to work. Maybe because I just started learning about jQuery, CSS and HTML stuff. If anyone can show me how to do achieve that, I'd greatly appreciate the help. Thank you

Edit: by focus I meant the appearance after someone clicked on the button.

Community
  • 1
  • 1
user1330974
  • 2,500
  • 5
  • 32
  • 60
  • 1
    By "when they have been clicked" do you mean the active state or a persistent selected status? – isherwood Jul 15 '13 at 21:16
  • 1
    Check out the jQuery ["ThemeRoller"](http://jqueryui.com/themeroller/) – Markus Hofmann Jul 15 '13 at 21:19
  • Hi @isherwood, I think I want the active state. But if you could explain me (or direct me to a resource that explains) persistent selected status, I would love to learn about it. Thank you. – user1330974 Jul 15 '13 at 21:29
  • 1
    @MarkusHofmann, thank you. I stumbled on that after I posted the question, but I don't want to change the whole theme. All I want is to change just the buttons' color. :) Thank you for showing me a cool and easy way to change colors for jQuery UI. – user1330974 Jul 15 '13 at 21:31
  • 1
    @user1330974 +1 for your reply :-) I recommend you to still have a look at the theme roller source. So edit the button color, download the file and inspect it. Then copy paste the parts you need. – Markus Hofmann Jul 15 '13 at 21:33
  • 1
    A selected status would probably involve putting an additional class on your buttons and applying styles to that class. jQueryUI includes that by default. You just need to implement it in your code. – isherwood Jul 15 '13 at 21:40
  • Thank you @isherwood. I think I got it to work by hacking http://jsfiddle.net/Akedf/7/ (not sure if it's a good idea to modify jQuery UI's native class, but oh well). Please feel free to take a look and give me comment/suggestion, etc. – user1330974 Jul 15 '13 at 22:04

1 Answers1

1

I don't think regular html elements have a focus attribute. You could use a checkbox or radio button, but as for a <label/>, you would probably have to just use javascript. If you are using jQuery, then it is really simple:

$("label").click(function(){
    $(this).addClass('focus');
});

As far as the css:

label.focus, input[type=radio]:focus{
    background: #0c0;
}
KJ Price
  • 5,774
  • 3
  • 21
  • 34
  • Thank you, @KJPrice! I think your solution might work. +1 for taking time to share with me a way to do it in jQuery. I'll make use of it when I'm not using just jQuery UI. For now, I think I solved the problem by hacking the class a bit http://jsfiddle.net/Akedf/7/ Please feel free to take a look and give me comments. I'd like to learn from those who're more experienced. :) Btw, I didn't accept your answer as solution just because I'm not sure if others who want jQuery UI solution will be able to replicate. Thank you so much for taking time to help me out. – user1330974 Jul 15 '13 at 22:10
  • Sounds fair to me. Good luck on your adventures! – KJ Price Jul 18 '13 at 15:02