jquery - jQuery UI：如何自定义按钮集角？

Question

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

谢谢你的帮助！

Answer 1

jQuery UI 框架解决方案：

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

演示在这里

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