8

特定のフォーム コンポーネントをラジオ ボタンとして機能させたい (一度に 1 つのオプションしか選択できない)。ラジオの弾丸を表示したくありませんが、ハイライトを選択するなどの代替の表示方法を選択するか、他の方法を選択します。これにより、グレースフル デグラデーションが可能になります。ユーザー ブラウザが Javascript をサポートしていない場合、基本的なラジオ ボタンにデグレードされます。JavaScript または CSS を使用して箇条書きボタンを非表示にしたいと考えています。誰でも方法を知っていますか？ありがとう。

4

8 に答える 8

5

次の CSS を使用すると、ラジオ ボタンを少しだけ非表示にすることができます (もちろん、アクセシビリティを失うことはありません)。

input[type="radio"] {
    left: -999em;
    position: absolute;
}

opacity: 0;ボタンがまだそこにあり、ページのスペースを占有しているため、使用は理想的ではありません。見えないように配置するのが最善の方法です。

于 2013-04-02T15:05:27.177 に答える
4

ラジオボタンをラベルで囲み、選択されているものを表す画像を使用する簡単なソリューションがあります。

<label>
    <input type="radio" name="foo">
    <img src="...">
</label>

次に、次のスタイルを適用しました。

label {
    float: left;
    width: 100px;
    height: 100px;
    position: relative;
    cursor: pointer;
}

label input[type=radio] {
    opacity: 0;
}

label img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
}

:checked + img {
    opacity: 1;
}

基本的に、それぞれlabelが で完全に満たされた通常サイズのボックスになりますimg。ラジオ自体は を使用して非表示にしopacity:0ます。ユーザーはimg、チェックされたラジオの次に選択されているものが不透明になり、他のラジオが半透明になることを知ることができます。他のさまざまな種類の効果を非常に簡単に実行できます。

私が気に入っているのは、フォームの処理がシンプルなままであることです。これは単なるラジオ ボタンのグループです。

ラジオボタンに不透明度を使用するのではなく、display:noneまたはラジオボタンvisibility:hiddenがまだタブインデックスにあり、フォームにキーボードからアクセスできるようにしました。

于 2012-12-05T02:45:28.417 に答える
2 
$('#js input[type=radio]').hide();
于 2011-03-02T05:32:45.813 に答える
2

私がこれを正しく理解していれば、ラジオボタンは必要ですが、ボタン自体は表示したくないでしょう。ボタンを削除するだけでは、求めているユーザー エクスペリエンスが得られないことに注意してください。なんらかの形式のユーザー フィードバックが必要です。

次の 2 つのオプションがあります。

1) javascript / jquery を使用してこれをプログラムします。そのことを念頭に置いて、ラジオ ボタンを最初のプレースホルダーとして使用し、ページを再描画してボタンをクリック可能な div と動的に変化する隠しフィールド値に置き換える JavaScript を (理想的には jquery プラグイン経由で) 使用することをお勧めします。

2) :checked の CSS メタ クラスを使用します。これは、残念ながらクロス ブラウザーをサポートしていないようです。

于 2011-03-02T05:34:13.910 に答える
1

cssで隠すことはできないと思います。ラジオボタンを非表示にしてから、機能をJSに置き換える必要があります。おそらく、選択可能なLIのリストがあなたのために働くでしょう。

jQuery UIから選択可能：http：//jqueryui.com/demos/selectable/

<input type='radio' value='1' name='rad' class='radio'>
<input type='radio' value='2' name='rad' class='radio'>
<input type='radio' value='3' name='rad' class='radio'>

<ol id="selectable" style='display:none'>
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
</ol>

$(function() {
    $('.radio').hide();
    $( "#selectable" ).show().selectable({
       selected: function(event, ui) {//figure out which was selected and mark the hidden radio button}
    });
});
于 2011-03-02T05:36:46.570 に答える
1 
var inputs = document.getElementById('my-form').getElementsByTagName('input');

for (var i = 0, inputsLength = inputs.length;i < inputsLength; i++) {

    var input = inputs[i];

    if (input.getAttribute('type') == 'radio') {
        input.style.display = 'none';
    }

}

または、お使いのブラウザがサポートしている場合 ( querySelectorAll in document)...

document.querySelectorAll('#my-form input[type="radio"]').style.display = 'none';
于 2011-03-02T05:33:09.833 に答える
-1

この style="list-style:none;" を追加することでそれを行うことができます

于 2011-03-02T05:31:23.213 に答える
-1

style="display:none;" すべての"<input type='radio'…&gt;"タグの中に: を挿入するだけ です。

これにより、箇条書きは非表示になりますが、ラベルは表示されたままになります。

于 2013-04-19T21:52:54.803 に答える