26

以下を使用して、チェックされたラジオボタンをcssで非表示にできるかどうかを知りたいです。

  { display:none; }

この要素に対処する方法がわかりません。チェックされたラジオボタンには常に「なし」が表示されますが、これはユーザーにとって何の意味もないので、非表示にしたいと思います。これは可能ですか？ポインタをありがとう。

4

7 に答える 7

47

ちょっとしたヒント:

↑ キーと ↓ キーを使用してそれらの間を移動するなど、ラジオとチェック ボックスに対するブラウザーのネイティブ サポートを引き続きすべて使用する場合は、css を次のように設定します。

position: fixed;
opacity: 0;
pointer-events: none;

これにより、すべての機能が保持されますが、入力は非表示のままになり、レイアウト スペースは占有されません。
私はこれを理解するために過去3時間を費やしましたが、うまくいきます!

于 2014-03-17T18:44:58.567 に答える
18

ネイサン・リーの回答に追加

input[type="radio"]:checked{
    visibility:hidden;
}

チェックされたラジオボタンを指定するオプションです

input[type="radio"][value="text"]:checked{
    visibility:hidden;
}

「テキスト」（例では「なし」）に等しい値でチェック済みのラジオボタンを指定するオプションです

詳細: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

値がわからない場合は、jQuery でトリックを実行できます: http://api.jquery.com/attribute-equals-selector/

于 2013-08-06T11:33:51.420 に答える
3

:checkedセレクターを使用してみてください：

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

デモ: http://jsfiddle.net/RkzG5/

于 2013-08-06T11:46:36.843 に答える
0

他の回答で言及されている問題（特にアクセシビリティの問題）に加えて、ラジオ入力があり、ユーザーがそれをチェックしなかったdisplay: noneときにブラウザによって表示される警告にも影響するという警告があります。required

一方、ラジオボタンはまだスペースを使用するため（およびAFAICSopacity: 0は効果がありません）、これは問題になる可能性があります（たとえば、配置のため、またはラジオボタンがタグ内にあり、必要な場合で変更する背景色。この場合、ラベルで を覆う必要があります)。visibility: hiddenwidth: 0px<li><li>:hover<li>

修正はposition、ラジオボタンの を次のように設定するだけですfixed 。

input[type=radio] {
    opacity: 10;
    position: fixed;
}

input[type=radio]+label {
    background-color: #eee;
    padding: 1em;
}
<input type="radio" id="radio1">
   <label for="radio1">radio1</label>

<input type="radio" id="radio2">
   <label for="radio2">radio2</label>

スニペットに見られるように (opacity: 10何について話しているかを確認するためだけに 0 の代わりに使用しています)、position: fixedラジオ ボタンを使用してもラベルには影響しません。

于 2019-06-26T14:25:49.847 に答える