0

私はjQMobileで作業しており、ボタンに適用されるクラス全体ではなく、ボタンの境界線の半径を正確に変更したいと考えていましたが、これは可能ですか?

コードの一部を次に示します。

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

そしてCSS：

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

最後に、サンプルを使用した jsfiddle: http://jsfiddle.net/juaning/rUBqm/

乾杯

4

1 に答える 1

1

jQuery Mobile は、追加のマークアップを適用して、jQuery Mobile アプリケーションで使用されるすべてのウィジェットをスタイル化します。つまり、すべてのスタイルが適用されたときにボタンが実際に表示されるわけではありません。jsfiddle のソースを見ると、表示されている「ボタン」を制御する div でボタンが実際にラップされていることがわかるはずです。

マークアップを次のように変更します

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

ボタンではなく div にクラスを追加する

cssを次のように変更します

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

フィドル

于 2013-09-25T06:52:46.663 に答える