ここですべてのCSSを使用している方法が気に入っています。あなたの質問は完全には明確ではありませんが、これがあなたが望むものだと思います:http: //jsfiddle.net/howlermiller/fUSXp/2/(iPadで試してみてください)
jQueryを使用してこの機能を取得するのは非常に簡単ですが、CSSからすべてを作成するためにすでにいくつかの作業を行っているので、私はすべてのCSSとして答えを保持しました。チェックボックスハックを使用し、iPadでテストして動作することを確認しました。
このハックはデスクトップブラウザでも機能するため、ボックスをクリックすると、マウスをオフにしたままではなく、スタイルが維持されます。それは、あなたがそれをどうするかによって、良いことでも悪いことでもあり得ます。
PS純粋なcss(別名チェックボックスハック)を使用することは、これを行うための実際の最良の方法ではありません。これにより、コードの柔軟性と再利用性が少し低下します。しかし、それは完全にうまく機能します。
編集:プレスを停止します。Safari5にバグがあります。このStackOverflowの質問のおかげで見つかりました。それを修正するためにあなたがしなければならないのは、ラベルに空のonclickを追加することだけです(ええ、別のハック、私は知っています、私もそれについて満足していません)。私自身のテストでは、Safari 6にはこのバグがないようです。そのため、Safari 5をサポートしていない限り、このバグは必要ありません(現実的には、現時点ではおそらくこれは良い考えです。これを数回使用している場合ただし、数か月は、おそらく古いフィドルを使用できます)。修正されたjsfiddleは次のとおりです。http://jsfiddle.net/howlermiller/fUSXp/3/