4

cssのみ（JSなし、JQなし）で、チェックされている場合はcontent： "on"、チェックされていない場合はcontent："off"のカスタムチェックボックスを作成するにはどうすればよいですか。

ありがとう。

再編集

OK、たくさんのコピー/貼り付け/削除の後、それは今動作します。

感謝。

4

4 に答える 4

13 

input[type=checkbox] {
    position: relative;
    visibility: hidden;
    cursor: pointer;
}

input[type=checkbox]:after {
    display: block;
    content: "OFF";
    position: absolute;
    top: 0;
    right: -30px;
    visibility: visible;
    height: 30px;
    line-height: 30px;
    width: 50px;
    text-align: center;
    border-radius: 4px;
    background: #d00;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

input[type=checkbox]:checked:after {
    content: "ON";
    background: #0a0;
}
<input type="checkbox" />

于 2012-11-20T02:11:15.230 に答える
1

可能です。RyanSeddonによるこれらのブログ投稿をチェックしてください。彼はあなたがチェックボックスとCSSで遊ぶことができる方法を説明します

http://www.thecssninja.com/css/custom-inputs-using-css

http://www.thecssninja.com/css/futurebox3

http://www.thecssninja.com/css/css-tree-menu

于 2012-11-20T02:31:16.663 に答える
0

CSSで実際の要素を作成することはできません。ただし、cssを使用してチェックボックスのスタイルを設定できます。

例：

input[type=checkbox] {
    outline: 2px solid #f00;
}

純粋なCSSに依存することは、さまざまなブラウザーやプラットフォームを扱う場合のギブオアテイクでもあります。これがあなたの質問に答えることを願っています。

于 2012-11-20T02:03:26.457 に答える
0

これはcssだけでは不可能だと思います。Cssはhtml要素を装飾し、そのプロパティを変更しません。チェックボックスをクリックすると、ボックスはページに表示するためにポストバックを実行する必要があります。その場合、cssは同じになります。javascriptが必要です。

javascriptを使いたくない理由は何ですか？

于 2012-11-20T02:03:52.160 に答える