jquery-mobile - jQuery mobile 1.4.0 中的按钮边框半径

Question

我的 jQuery mobile 1.4.0 中有以下按钮，我想修改它的边框半径以便成为下图中的按钮，我尝试了以下代码，但它对我不起作用，我该怎么做修改 jQuery mobile 1.4.0 中的按钮边框半径？请帮助我..

<div   class="ui-btn ui-input-btn  center_BTN " >                                                   
<input type="button" id="save" data-inline="true" value=" Save"  data-icon="check"      />

</div> 

CSS

.center_BTN {
  text-align:center;
  background-color:transparent !important;
  border:none;
}


.center_BTN.ui-btn,.center_BTN .ui-input-btn{

  border: solid #cccccc 5px;
  border-radius:32px !important;

}

Answer 1

更新

jQM 添加了一个不需要任何 JS 干预的新功能。创建一个自定义类，例如foo，然后将data-wrapper-class="foo"属性添加到input自身。

<input type="button" data-wrapper-class="foo" />

演示

---

旧答案

jQuery Mobile 动态包装input在一个 div 中，所有 CSS 样式都添加到其中，因此无法对其进行静态样式设置。

使用所有 CSS 创建一个自定义类，并在创建页面后添加它。

$(".selector").closest("div").addClass("custom-class");

演示

Answer 2

圆角矩形按钮

.ui-btn-corner-all {
   border-radius: 1m;
}

矩形按钮

.ui-btn-corner-all {
   border-radius: 0m;
}