jQuery UI：如何自定义按钮组角落？

Question

如下图所示，如何自定义jQuery UI的单选按钮组的角落？而不是在按钮的右侧有一个圆角，我如何自定义它并使其在底部有圆角？

感谢您的帮助！

Answer 1

jQuery UI框架解决方案：

• 找到按钮组中的第一个（和最后一个控件）
• 删除课程ui-corner-left（和ui-corner-right）
• 添加课程ui-corner-top（和ui-corner-bottom）

Demo here

Answer 2

在jQuery UI脚本之后使用以下jQuery

以下示例

<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>

使用此脚本

 // select last radio label
    var radio = $( "#radio" ).find('label').last();

    //update border radius
    $(radio).css('border-radius','0px 0px 4px 4px');

Answer 3

在jQuery UI CSS中，更改您的按钮：

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

到

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