0

実際、私はこのトリックでラジオボタンをスタイリングしています：

HTML：

<div class="radioButt" >
  <h1>Radio:</h1>
  <p>Val1 : <span></span><input type="radio" id="1" checked="checked" name="radio" ><span></span></p>
  <p>Val2 : <span></span><input type="radio" id="2" name="radio" ><span></span></p>
  <p>Val3 : <span></span><input type="radio" id="3" name="radio" ><span></span></p>
</div>

CSS：

.radioButt p {
    padding: 10px;
}

.radioButt span{
    position: relative;
    right: 0;
    width: 25px;
    height: 25px;
    line-height: 25px;
    padding: 3px;
    color: #FFF;
    text-align: center;
    background: #c06f59;
}

.radioButt  span:after{
    content: "no"; /*if CSS are disbled span elements are not displayed*/
}

.radioButt input{
    position: relative;
    right: 0;
    margin: -26px;
    width: 31px;
    height: 31px;
    /*hide the radio button*/
    filter:alpha(opacity=0);
    -moz-opacity:0;
    -khtml-opacity: 0;
    opacity: 0;
        cursor: pointer;
}

.radioButt  input[type="radio"] + span{ /*the span element that immediately follow the radio button */
    visibility: hidden; /*temporarily hide the "YES" label*/
    background: #6EB558;
}

.radioButt input[type="radio"] + span:after{
        width: 30px;
        display: inline-block;
    content: "yes"; /*if CSS are disbled span elements are not displayed*/
}


.radioButt input[type="radio"]:checked + span{
    visibility: visible; /*show the "YES" label only if the radio button is checked*/
}

実用的な例は次の場所にあります：http：//jsfiddle.net/rzt3c/2/

チェックボックス入力でも同じ効果を出したい。cssに「チェックボックス」タイプを追加しようとしましたが、機能しないようです...実際、チェックボックスをオンにすると、IDはオフになりません。（ここにコードがあります：http：//jsfiddle.net/rkCMa/1/）

4

1 に答える 1

0

更新された回答

以下の理由は依然として正しいのですが、スタイルを使用することで、CSS を使用して (まだユーザビリティの制約はありますが...) はるかに簡単にそれを行う方法がありますpointer-events。これをスタイルに追加します。

.radioButt span{
  pointer-events: none;
}

これにより、スパンをクリックして通過できるようになり、ポストスパンが入力をブロックしなくなります。これはあなたの質問に答えるはずですが、元の質問へのコメントに記載されているユーザビリティの問題のいくつかに留意してください.

機能しない理由は、スパンが入力の上にある「はい」と表示されるため、実際にクリックされているのは入力ではなくスパンです。両方のスパンが入力の前になるようにフォーマットを変更し、css セレクターではなくクラス名を使用してそれらを区別し、スタイルを設定します。何かのようなもの：

<div class="radioButt" >
  <h1>Checkbox:</h1>
  <p>Ck1 : <span class="no"></span><span class="yes"></span><input type="checkbox" id="ck1" checked="checked" ></p>
  <p>Ck2 : <span class="no"></span><span class="yes"></span><input type="checkbox" id="ck2" ></p>
  <p>Ck3 : <span class="no"></span><span class="yes"></span><input type="checkbox" id="ck3" ></p>
</div>
于 2013-01-17T19:32:29.340 に答える