8

テスト用のこの簡単なコードがあります。

<html>
<head>
<style type="text/css">
    ul{
        float:left;
        margin:0;
        list-style:none;
        padding:0;
      }
</style>
    </head>
<body>
    <ul>
       <li><input type="checkbox" id="c1" class="checkBox">a</li>
        <li><input type="checkbox" id="c2" class="checkBox"/>b</li>
        <li><input type="checkbox" id="c3" class="checkBox"/>c</li>
    </ul>
    <ul>
        <li><input type="checkbox" id="c4" class="checkBox"/>d</li>
        <li><input type="checkbox" id="c5" class="checkBox"/>e</li>
           <li><input type="checkbox" id="c6" class="checkBox" />f</li>
    </ul>
    <ul>
        <li><input type="checkbox" id="c7" class="checkBox"/>g</li>
        <li><input type="checkbox" id="c8" class="checkBox"/>h</li>
        <li><input type="checkbox" id="c9" class="checkBox"/>i</li>
    </ul>
</body>
</html>

結果は次のとおりです。

ここに画像の説明を入力

ただし、ズームアウトするとテキストは小さくなりますが、チェックボックスは同じままです

ここに画像の説明を入力

ズームインするとテキストが大きくなりますが、チェックボックスは同じままです

ここに画像の説明を入力

チェックボックスのサイズも変更できるようにすることはできますか? たとえば、ラベルのサイズに比例しますか? 前もって感謝します

4

4 に答える 4

5

jsFiddleデモ

CSS3を使用して、リストとブラウザでレンダリングされたチェックボックスをズームします。

.extraLarge ul {
  -moz-transform: scale(1.50);
  -webkit-transform: scale(1.50);
  -o-transform: scale(1.50);
  transform: scale(1.50);
  padding: 10px;
}
于 2013-01-11T02:59:32.693 に答える
2

:checked セレクターを使用して、CSS3 a でそれを行うことができます。これが行うことは、背景画像でスタイル付き入力を使用することです。そのため、拡大/縮小すると、テキストとともにサイズが変更されます。残念ながら、IE9 以下では動作しません。

CSS:

.theCheckbox input {
    display: none;
}

.theCheckbox span {
    width: 20px;
    height: 20px;
    display: block;
    background: url("link_to_image");
}

.theCheckbox input:checked + span {
    background: url("link_to_checked_image");
}

HTML: 

<label for="test">Label for checkbox</label>
<label class="theCheckbox">
    <input type="checkbox" name="test"/>
    <span></span>
</label>
于 2013-01-11T02:12:28.433 に答える
1

ネイティブ OS の実装に依存しないように、独自のチェックボックス コントロールを作成できます。一般的な html 要素を使用して作成すると、ブラウザのズームがスムーズに機能します。

ライブラリ用の既存のプラグインがたくさんあります (jQuery など)。

于 2013-01-11T20:35:17.817 に答える
0

Firefox には「テキストのみ」のズーム機能がありますが、この機能がない Chrome とは異なります。

Firefox ですべてをズームするには、チェックマークを外してズーム レベルをリセットします。

ここに画像の説明を入力

Chrome ブラウザーの場合は、この機能を備えた Zoom プラグインを調べてください。

于 2013-01-11T05:29:38.177 に答える