Question

When I change a button’s font-weight, the size will also be changed. My problem is that I can’t give the button a predefined size, so I tried to fix it with .css('width','-=4px');

But that will not work. Hope somebody can help me.

HTML

<input id="b1" type="button" value="Hello world" />
<input id="b2" type="button" value="Blubba blib" />
<input id="b3" type="button" value="Bl" />
<input id="b4" type="button" value="Blubba 55" />

JS

$('input:button').click(function() {

  $('*').css('font-weight','normal');  
  $(this).css('font-weight','bold');    
  $(this).css('width','-=4px');      

});

Exmaple
http://www.jsfiddle.net/V9Euk/618/

Thanks in advance!
Peter

Answer 1

Edit:

Just add some extra width before making it bold.

$('input:button').width(function(){
    return $(this).outerWidth() + 20;
}).click(function() {
    $(this).css('font-weight', 'bold').siblings().css('font-weight', 'normal');
});

http://www.jsfiddle.net/djhRB/

there you go.