0

ユーザーが選択できるアイテムのリストを表示しています（複数選択）。私の要件は 1) 項目が選択されている場合、チェックボックス アイコンだけでなく、行全体が強調表示されている必要があります。縦にグループ化されたチェックボックス) 2) チェックボックスのアイコンは表示されるべきではありません

コード ライブバージョン

<div id="content" data-role="content">
        <div id="list-checkboxes" data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="vertical"data-theme="m">
                <label for="chb_1" data-theme="m" >Car</label>
                <input type="checkbox" name="chb_1" id="chb_1" class="custom" />
                <label for="chb_2">Van</label>
                <input type="checkbox" name="chb_2" id="chb_2" class="custom" />

            </fieldset>    
        </div><!-- /content -->
4

1 に答える 1

0

これを実現するには、次のようにcssをオーバーライドできます。

#verticalSelect .ui-checkbox{
   clear:both;
    /*float:none;*/

}

#verticalSelect .ui-checkbox .ui-btn{
   border-radius:0;
    border-top-width:0;

}

#verticalSelect .ui-checkbox:first-of-type .ui-btn{
   border-top-left-radius:0.6em;
    border-top-right-radius:0.6em;
    border-top-width:1px;

}

#verticalSelect .ui-checkbox:last-of-type .ui-btn{
   border-bottom-left-radius:0.6em;
    border-bottom-right-radius:0.6em;
}

アイデアは、各アイテムのフローティングを削除し、境界線のスタイルを微調整することです。

完全なデモはこちら-http://jsfiddle.net/c59FN/

于 2012-12-11T07:39:16.690 に答える