jQ Mobile change border radius of specific button

Question

I'm working with jQMobile, and wanted to change the border radius of a button, exactly a button, and not the whole class applied to buttons, is this even possible?

Here's a part of the code:

<!-- language: html -->
<div class="ui-grid-b">
  <div class="ui-block-a">
    <button type="submit" data-theme="a" class="ui-btn-hidden flight-type-btn-1" data-disabled="false" data-mini="true">Return</button>
  </div>
  <div class="ui-block-b">
    <button type="submit" data-theme="a" class="ui-btn-hidden flight-type-btn-2" data-disabled="false" data-mini="true">One Way</button>
  </div>
</div>

and the css:

.flight-type-btn-2 {
    border-radius: 5px;
}

and finally a jsfiddle with the sample: http://jsfiddle.net/juaning/rUBqm/

Cheers

Answer 1

jQuery Mobile applies extra markup to stylize all the widgets used in a jQuery Mobile application. That means the button isn't what you actually see when all the styles have been applied. Looking at the source of your jsfiddle you should be able to see that your button has actually been wrapped in a div which is what controls the "button" that you see.

Change your markup to

<div class="ui-grid-b">
    <div class="ui-block-a flight-type-btn-1">
        <button type="submit" data-theme="a" class="ui-btn-hidden " data-disabled="false" data-mini="true">Return</button>
    </div>
    <div class="ui-block-b">
        <button type="submit" data-theme="a" class="ui-btn-hidden flight-type-btn-2" data-disabled="false" data-mini="true">One Way</button>
    </div>
</div>

Adding the class to the div rather than the button

and change you css to

.flight-type-btn-1 div {
    border-radius: 8px;
}

Fiddle