2

独自のラジオボタンとチェックボックスのスタイルを設定して、Web フォームを起動しようとしています。これを行うには、ラジオ/チェックボックス自体を非表示にして、次のように :after 疑似クラスを使用してラベルに状態を示す要素を作成します。

.pn_multi label{
    display:    inline-block;
    border:     1px dotted #FFF;

    opacity:    0.6;

    text-align: center;
}
.pn_multi label:hover{
    border:     1px dotted #444;
    opacity:    0.8;
}

.pn_multi input[type=radio]:checked + label, .pn_multi input[type=checkbox]:checked + label {
    background: #CCE6FF;
    border:     1px dotted #FFF;
    opacity:    1.0;
    position:   relative;
}

/* generic icon */
.pn_multi input[type=radio]:checked + label:after, .pn_multi input[type=checkbox] + label:after {

    display:    block;
    position:   absolute;
    right:      1px;
    bottom:     1px;
    overflow:   hidden;

        /* a lot more styling here, took out for space */
}

/* specific icon colors*/
.pn_multi input[type=checkbox] + label:after {
    content: "\2714  ";
    background: #FF9393;
    color:      #F22;
    border:     1px solid #F22;
}
.pn_multi input[type=radio]:checked + label:after, .pn_multi input[type=checkbox]:checked + label:after {
    content: "X  ";
    background: #97FF97;
    color:      #063;
    border:     1px solid #063;
}

さて、これはラジオに対して完全にうまく機能します。ラベルをクリックすると、小さなチェックボックスがラベルに表示され、他のラベルには表示されません。しかし、問題はチェックボックスです: チェックされたものはまだ緑色のチェックボックスを表示しますが、チェックされていないものはまったく表示されず、本来あるべき赤いものも表示されません. のようです

.pn_multi input[type=checkbox] + label:after

部分がまったくグリップしていないか、:checked 疑似クラスがそのスタンドアロンを上書きするようです。

ここで大きな何かが欠けていますか？

よろしく

4

1 に答える 1

5

シュート！最終的には使用しませんでしたが、BoltClock が提案したようにコードを jsfiddle にコピーして、自分のエラーを見つけました。

問題はコードのこの部分です

.pn_multi input[type=radio]:checked + label, 
.pn_multi input[type=checkbox]:checked + label {
    background: #CCE6FF;
    border:     1px dotted #FFF;
    opacity:    1.0;
    position:   relative;
}

正確には位置:相対です。:after 要素に絶対位置を設定できるようにするためにこれが必要でした (ラベルの内側にそれらを表示するため)。したがって、チェックされていない要素で作成された :after 要素の絶対位置は、それらを画面の外に配置することになりました。

解決策: 最初からすべてのラベル position:relative を作成しました。

ご迷惑をおかけして申し訳ありません

于 2011-09-07T17:02:13.777 に答える