jquery-mobilejquery-mobile-button

Button border radius in jQuery mobile 1.4.0

I have the following button in my jQuery mobile 1.4.0 , I want to modify its border radius in order to be as the button in the following image , I have tried the following code but it didn't work for me , How can i modify the button border radius in jQuery mobile 1.4.0? Plese help me ..

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

}

enter image description here

Solution

  • Update

    jQM has added a new feature which doesn't require any JS intervention. Create a custom class e.g. foo and then add data-wrapper-class="foo" attribute to input itself.

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

    Demo

    Old answer

    jQuery Mobile dynamically wraps input in a div where all CSS styles are added to it, hence it is not possible to style it statically.

    Create a custom class with all your CSS and add it after page is created.

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

    Demo