Радиус границы кнопки в jQuery mobile 1.4.0

У меня есть следующая кнопка в моем мобильном телефоне jQuery 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;

}

введите здесь описание изображения


jquery-mobile jquery-mobile-button
person user    schedule 25.01.2014    source источник
comment
вы не можете сделать это с помощью CSS, так как jQM переносит ввод в div. вы можете сделать это следующим образом: jsfiddle.net/Palestinian/mHy3j   -  person Omar    schedule 25.01.2014
comment
@OmarOmar Большое спасибо, можете ли вы опубликовать свой ответ, чтобы я мог его принять.   -  person user    schedule 25.01.2014

Ответы (2)


arrow_upward
4
arrow_downward

Обновлять

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

Демо

person Omar    schedule 25.01.2014

arrow_upward
0
arrow_downward

Кнопка со скругленными углами

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

Кнопка прямоугольника

.ui-btn-corner-all {
   border-radius: 0m;
}
person Ved    schedule 25.01.2014
comment
@Vedthanks, я пробовал, но у меня это не сработало, мне нужно изменить радиус границы только для этой кнопки, поэтому я пробовал: #save.ui-btn-corner-all { border-radius: 1m; } но это не сработало - person user; 25.01.2014
comment
Я использую jQuery mobile 1.4.0. Не могли бы вы мне помочь? - person user; 25.01.2014
comment
.center_BTN .ui-btn-corner-all {граница-радиус: 0em; } использовать это . Я проверил, как это работает: 1em для прямоугольника со скругленными углами и 0em для прямоугольной формы. - person Ved; 25.01.2014
comment
@VedIt тоже не работает !!, вы тестировали его на jQuery mobile 1.4.0 и на кнопке типа ввода ?? - person user; 25.01.2014
comment
Откройте свою страницу в браузере и щелкните правой кнопкой мыши кнопку, проверьте элемент и попробуйте добавить время закругления углового радиуса ui-btn. - person Ved; 25.01.2014