jquerycssjquery-uijquery-ui-button

jQuery UI: How to customize buttonset corners?


Like the image below, how can I customize the corner of the radio buttonset of jQuery UI? Instead of have a round corner at right side of a button, how can I customize it and make it has rounded-corner at the bottom?

jQuery UI buttonset

Thanks for your help!


Solution

  • Use following jQuery after your jQuery UI script

    for following example

    <div id="radio">
        <input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
        <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
        <input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
      </div>
    

    use this script

     // select last radio label
        var radio = $( "#radio" ).find('label').last();
    
        //update border radius
        $(radio).css('border-radius','0px 0px 4px 4px');