ラジオボックスのテキストベースを作成する方法

-1

ちょっと私はイメージベースのラジオボックスを作成する方法を知っていますが、質問はラジオボックスを作成する方法です（ラジオボタンは隠されています）？テキストはクリック可能です。ラジオボックスのテキストベースを作成する方法

<!DOCTYPE html> 
<html> 
<head> <style type="text/css"> 
    input[type='radio'] { 
    opacity:0; 
} 
    </style> 
</head> 
<body> 
    <label for="male">Male</label> 
    <input type="radio" name="gender" id="male" value="male"><br> 
    <label for="female">Female</label> 
    <input type="radio" name="gender" id="female" value="female"><br> 
    <label for="other">Other</label> 
    <input type="radio" name="gender" id="other" value="other"><br><br>  
</body> 
</html>

出典

2016-03-22 Brk

しようとしましたか？ – ketan

あなたはこれまでに何を試しましたか？あなたが最後に試したコードを共有してください。 –

あなたはどのようなものを選んだのですか？ – Rayon

あなたはこのような何かを試すことができ非常に単純ですCSS：

input[type="radio"] { display:none; } 
input[type="radio"]:checked + label{ font-weight: bold }

ここに簡単なデモ：JSFiddle

出典

2016-03-22 07:28:17

答えは

input[type="checkbox"] { 
 
     position:absolute; 
 
     opacity:0; 
 
    } 
 
    input[type="checkbox"] + span { 
 
     border:2px solid #D3D3D3; 
 
     border-radius:6px; 
 
    } 
 
    input[type="checkbox"]:checked + span { 
 
     border-color:#4df; 
 
    }

<label> 
 
    <input class="graph_checkbox" type="checkbox" /><span>HelloWorld</span> 
 
</label>

出典

2016-03-22 07:26:53 Brk

HTML：：

<input type="radio" id="radio1" name="radio_name" value="1" checked="checked"> 
    <label for="radio1">Radio 1</label> 
    <br /> 
    <input type="radio" id="radio2" name="radio_name" value="2"> 
    <label for="radio2">Radio 2</label> 
    <br /> 
    <input type="radio" id="radio3" name="radio_name" value="3"> 
    <label for="radio3">Radio 3</label>

出典

2016-03-22 07:29:18 KiwixLV

私はあなたの質問からわかるが、テキストのラジオボタンをしたいが、それは円の代わりに、テキストは、クリック-ことが可能であり、値（0を渡しています1）ので、このコードをチェックしてください...

<head> 
    <title>Test</title> 
    <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script> 
    <style> 
     label{ 
      border:1px blue solid; 
      padding:10px; 
      margin:20px; 
     } 
    </style> 
    <script> 
     $("document").ready(function(){ 
      //alert('ok'); 
      var tr; 
      $("#txtradio").click(function(){ 
       //alert('ok'); 
       tr = tr==0?1:0; 
       //alert(tr); 
       if(tr==1){ 
        $("label").css({"background-color":"blue","color":"white"}); 
       }else{ 
        $("label").css({"background-color":"white","color":"black"}); 
       } 
      }); 
     }) 
    </script> 
</head> 
<body> 
    <label id="txtradio"> 
     sunil 
    </label> 
</body>

出典

2016-03-22 08:43:42

ラジオボックスのテキストベースを作成する方法

答えて

関連する問題