CODEWITHSUNDEEP
jquerycssjquery-uijquery-ui-button
PaulLing
PaulLing

Reputation: 2150

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!

Upvotes: 0

Views: 2089

Answers (3)

ProllyGeek
ProllyGeek

Reputation: 15836

In jQuery UI CSS, change your button which has :

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 4px;
}

to 

.ui-corner-left, .ui-corner-right {
    border-bottom-right-radius: 4px;
}

Upvotes: 0

Zainul Abdin
Zainul Abdin

Reputation: 835

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');

Upvotes: 1

Salman Arshad
Salman Arshad

Reputation: 272006

jQuery UI framework solution:

  • Locate the first (and last control) in the buttonset
  • Remove the classes ui-corner-left (and ui-corner-right)
  • Add the classes ui-corner-top (and ui-corner-bottom)

Demo here

Upvotes: 1

Related Questions