html - 画像を使用せずにcssを使用して目盛りチェックボックスをスタイルする方法は?

Question

Google のサインイン ページのように、画像を使用せずに HTML と CSS3 のみを使用して目盛りチェック ボックスをスタイルする方法はありますか?

Answer 1

これは、HTML、CSS、および jQuery を組み合わせて使用​​することで実現できます。<a>タグからチェックボックスを作成し、CSS でスタイルを設定するためにここで作成したコードを参照してください。

このコードをテストしたところ、Chrome、FF、および IE 7-10 で美しく動作します。Safari や Opera はまだテストしていません...

http://jsfiddle.net/wdews/reXL6/

<a>チェックボックスタグをタグにネスト<form>し、ID、「チェックボックス」のクラス、およびハッシュタグ HREF を指定してください。本質的に：

    <form action="#" method="get">

    <a class="checkbox" id="myCheckbox" href="#"></a>

    -or-

    <a class="checkbox checked" id="myCheckbox" href="#"></a>

    </form>

それがあなたにとってどのようになるか教えてください。

Answer 2

この投稿は古いですが、これは私が提案するものです：

次のようにラベルをチェックボックスに関連付けます。

<input type="checkbox" value="1" id="c1" />
<label class="check" for="c1"></label>

CSS でチェックボックスを非表示にします。

.checkboxes input[type=checkbox]{
    display:none
}

必要に応じてラベルのスタイルを設定します。個人化チェックボックスの使用方法を完全に示す単純な jsfiddle を作成しました。

ここにjsfiddleがあります