CSSオーバーレイとアクティブボタン

Question

jquery mobileを使用してモバイルアプリケーションを構築しています。しかし私は私のセグメントコントロールに問題があります。あなたがhereを見ることができるように。

ここで達成したいのは、ボタンを選択すると、このボタンの背景が異なる背景色になります。あなたは、私は、バックグラウンドのIDのコントロールを使用して見ることができると同様

ここでは、私のHTML

<div data-role="fieldcontain"> 
       <fieldset data-role="controlgroup" data-type="horizontal" > 
        <input type="radio" name="radio-view" data-icon="segment-titlestyle-segonly" id="segment1" value="choice1" checked="checked" /> 
        <label for="segment1" id="controls"><span class="ui-btn-text-controls">Iedereen</span></label> 
       <input type="radio" name="radio-view" data-icon="segment-titlestyle-segonly" id="segment2" value="choice2" /> 
        <label for="segment2" id="controls"><span class="ui-btn-text-controls">Team</span></label> 
        <input type="radio" name="radio-view" data-icon="segment-titlestyle-segonly" id="segment3" value="choice3" /> 
        <label for="segment3" id="controls"><span class="ui-btn-text-controls">Favorieten</span></label> 
       </fieldset> 

を見つけることができます。

#controls{ 
     background-color: #C0C0C0 !important; 
     border-color: black !important; 
    } 

#controls:overlay{ 
    background-color: #C0C0C0 !important; 
} 

しかし、動作しません。誰も私を助けることができますか？

大切にしてください。

Answer 1

非常に最初のことは同じIDを複数回割り当ててはなりません代わりにクラスを使用してください。選択の基盤上のスタイルを変更したい場合は、クラスを作成してjqueryで切り替える必要があります。 addClassとremoveClassを使用します。

Answer 2

純粋なCSSでこれを非常に簡単に行うことができます。このhttp://jsfiddle.net/Fa3rp/3/