1

したがって、次のような2つのラジオボタンがあります。

<input type="radio" name="hello" id="a" value="a">
<label for="a">First</label>
<input type="radio" name="hello" id="b" value="b">
<label for="b">Second</label>

期待される機能は、ラジオボタンのラベルのどこかをクリックすると、ラジオが選択されることです。（ラジオボタンの円を正確にクリックする必要はありません）

今、私はラジオボタンの独自のスタイリングを行ったので、次のようにラジオサークルを非表示にします。

input[type="radio"] {
display:none;
}

これで、すべてのブラウザでうまく機能するようですが、Opera miniでリンクを開くと、ラベルをクリックしたときにボタンを選択するためのアプローチのラベル​​が機能しないため、選択したボタンを切り替えることができません。円自体をクリックする必要があります。円を非表示にしているため、ラジオボタンは機能しません。

デモについては、他のブラウザやOperaMiniからこのリンクにアクセスしてください。

Operaminiで何が機能するのか考えてみてください。display:noneブラウザがOperaminiの場合に使用しないcssで指定する方法はありますか？

4

3 に答える 3

1

代わりにラジオボタンを変更することになりまし<input type="button"...>た。

onClickボタンのボタンごとにjavascript関数を呼び出しており、cssには、javascriptから切り替えられる状態ごとに2つの異なるルールがあります。このハックは、他のハックよりも効率的で信頼性が高いことがわかりました。また、Opera miniだけでなく、Operaminiのようなラジオボタンラベルタグを処理する他のブラウザでも機能が動作することを保証します。

于 2012-10-10T10:44:36.190 に答える
1

ラベルとCSSを備えたOperaMiniには素敵なBUGがあります

私のCSSで私は持っていました

 label {
 cursor: pointer;
 }

これにより、Opera Miniはページを更新し、ラベルをクリックするたびにサーバーにGETリクエストを送信しました。これにより、POSTページを表示しているときにフローが中断されました。

于 2014-03-31T07:16:26.067 に答える
0

このJavaScriptをページに追加できます。

これはユーザーエージェントの文字列で機能しますが、通常はお勧めできません。

ユーザーエージェントがOperaMiniであるかどうかを確認し、ラジオボタンstyle.displayをblockまたはに設定します。none

if (window.addEventListener){           
    window.addEventListener('load', setRadioButtons, false);
} else {
    window.attachEvent('onload', setRadioButtons);
} 

function setRadioButtons() {
    for (i=0; i<document.getElementsByTagName('input').length; i++) {
        if (document.getElementsByTagName('input')[i].type == 'radio' && navigator.userAgent.indexOf("Opera Mini") != -1)
            document.getElementsByTagName('input')[i].style.display = "block";
        else
            document.getElementsByTagName('input')[i].style.display = "none";   
    }
}
于 2012-10-09T15:39:51.710 に答える