尹ボタンの設置が上手くいきません。

ラジオボタンを以下の形にしたいのですが、上手く設定できません。

サンプル

以下の記事を読みながら、作成したのですが、ボタンがつぶれたり、四角になってしまったりと上手くいきません。
リンク内容

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6<meta http-equiv="X-UA-Compatible" content="IE=edge">
7<title>ToDoリスト</title>
8<link rel="stylesheet" href="css/styles.css">
9</head>
10<body>
11<h1>ToDoリスト</h1>
12
13  <label>
14    <input type="radio" name="radio" class="radio" />
15    <span class="radio-icon"></span>
16    すべて
17  </label>
18
19  <label>
20    <input type="radio" name="radio" class="radio" />
21    <span class="radio-icon"></span>
22    作業中
23  </label>
24
25  <label>
26    <input type="radio" name="radio" class="radio" />
27    <span class="radio-icon"></span>
28    完了中
29  </label>
30
31  <h3 id="id_h3">IDコメント　状態</h3>
32  <h2>新規タスクの追加</h2>
33
34  <p>
35      <input type="text" id="id_text" value=""> 
36      <button id="btn" type="btn" class="button"> 追加</button>
37  </p>
38 
39
40  <script>
41    const btn = document.getElementById('btn');
42    btn.addEventListener('click', () => { 
43      const text = document.getElementById('id_text').value;
44  
45      const h2 = document.getElementById('id_h2');
46
47      document.body.insertBefore(document.createTextNode(text), h2);
48    });
49
50  </script>
51
52</body>
53</html>

CSS
1.button:hover {
2  background-color: #59b1eb;
3}
4.button:active {
5  top: 3px;
6  box-shadow: none;
7}
8
9.radio {
10  display: none;
11}
12
13.radio + .radio-icon:before {
14  content: "\f3a6";
15  font-family: "Ionicons";
16  color: #ccc;
17  font-size: 22px;
18}
19
20.radio:checked + .radio-icon:before {
21  content: "\f3a7";
22  color: #17bcdf;
23}

7
【追記】
リンク「<script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>」をHTMLを挿入することで、ボタンはうまく反映されました。

サンプル通りのラジオボタンのコードはどのように検索すれば見つかるモノなのでしょうか？
検索は書けたのですが、見つからず途方に暮れています。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6<meta http-equiv="X-UA-Compatible" content="IE=edge">
7<title>ToDoリスト</title>
8<link rel="stylesheet" href="css/styles.css">
9<link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
10</head>
11<body>
12<h1>ToDoリスト</h1>
13
14  <label>
15    <input type="radio" name="radio" class="radio" />
16    <span class="radio-icon"></span>
17    すべて
18  </label>
19
20  <label>
21    <input type="radio" name="radio" class="radio" />
22    <span class="radio-icon"></span>
23    作業中
24  </label>
25
26  <label>
27    <input type="radio" name="radio" class="radio" />
28    <span class="radio-icon"></span>
29    完了中
30  </label>
31
32  <h3 id="id_h3">IDコメント　状態</h3>
33  <h2>新規タスクの追加</h2>
34
35  <p>
36      <input type="text" id="id_text" value=""> 
37      <button id="btn" type="btn" class="button"> 追加</button>
38  </p>
39 
40
41  <script>
42    const btn = document.getElementById('btn');
43    btn.addEventListener('click', () => { 
44      const text = document.getElementById('id_text').value;
45  
46      const h2 = document.getElementById('id_h2');
47
48      document.body.insertBefore(document.createTextNode(text), h2);
49    });
50
51  </script>
52
53</body>
54</html>

CSS
1.button:hover {
2  background-color: #59b1eb;
3}
4.button:active {
5  top: 3px;
6  box-shadow: none;
7}
8
9
10.radio {
11  display: none;
12}
13.radio + .radio-icon:before {
14  content: "\f3a6";
15  font-family: "Ionicons";
16  color: #ccc;
17  font-size: 22px;
18}
19.radio:checked + .radio-icon:before {
20  content: "\f3a7";
21  color: #17bcdf;
22}

【追記】
上手く行きました！

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6<meta http-equiv="X-UA-Compatible" content="IE=edge">
7<title>ToDoリスト</title>
8<link rel="stylesheet" href="css/styles.css">
9
10</head>
11<body>
12<h1>ToDoリスト</h1>
13
14<div class="radiobutton">
15    <input type="radio" id="button-1" name="radio1" value="1" checked />
16    <label for="button-1">すべて</label>
17    <input type="radio" id="button-2" name="radio1" value="2" />
18    <label for="button-2">完了中</label>
19    <input type="radio" id="button-3" name="radio1" value="3" />
20    <label for="button-3">作業中</label>
21
22
23
24  <h3 id="id_h3">ID コメント 状態</h3>
25  <h2>新規タスクの追加</h2>
26  
27
28  <p id=id_p>
29      <input type="text" id="id_text" value=""> 
30      <button id="btn" type="btn" class="button"> 追加</button>
31  </p>
32 
33  <script>
34    
35    const btn = document.getElementById('btn');
36    btn.addEventListener('click', () => { 
37      const text = document.getElementById('id_text').value;
38      const p1 = document.getElementById('id_p');
39      const p2 = document.getElementById('id_p');
40      const h2 = document.getElementById('id_h2');
41
42      //const button = <button id="btn" type="btn" class="button"> 作業中</button>
43      //const button = document.createElement('btn');
44      //btn.textContent = '作業中';
45      //document.body.appendChild(button);
46
47      p1.innerHTML("作業中");
48      p2.innerHTML("削除");
49      document.body.insertBefore(document.createTextNode(text), h2);
50
51    });
52
53      
54
55  </script>
56
57</body>
58</html>

date

2019/11/28 04:06

このラジオボタンのサンプルはどこのですか

asako1010

2019/11/28 07:11

すみません。直接はればURL貼れば良かったですね。失礼しました。 https://gyazo.com/d2c1c87a05c786e2ded8873d13fd0a0d

行動規範の内容に同意します

回答1件

ベストアンサー

サイトが良くないですねぇ

HTML
1<!-- headタグ内に下記コード追加 -->
2<link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">

isnicons公式サイト

あとCSS正しくは下記らしいですね

CSS
1.checkbox + .checkbox-icon:before {
2  content: "\f372";
3  font-family: Ionicons; /* ダブルクォーテーションいらないらしい */
4  color: #ccc;
5  font-size: 22px;
6}
7.checkbox:checked + .checkbox-icon:before {
8  content: "\f374";
9  color: #17bcdf;
10}

投稿2019/11/28 04:57

編集2019/11/28 04:59

azuapricot

総合スコア2341

asako1010

2019/11/28 07:24

<link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet"> を入れるとボタンが反映されました。 Ioniconsを使う場合はリンクを挿入しないといけないのですね。ありがとうございます。さらに質問して図々しいのですが、私の質問文のサンプルのラジオボタンにする為のコードはどのように調べればよいのでしょうか？教えて頂けるとありがたいです。

azuapricot

2019/11/28 07:31

「サンプルのラジオボタン」が何を指しているのかはわかりませんけど、あなたが参考にしているサイトだと回答に記載した公式サイトからアイコンを取得して表示しているだけです。アイコンを好きなように変更するか、ここのデザインをその「やりたいように」変更したらよいのでは？アイコンで事足りないなら、それは自作でスタイルを設定するしかないので別質問になるかと思います。

asako1010

2019/11/28 07:40

サンプルのラジオボタンは以下になります。 https://gyazo.com/d2c1c87a05c786e2ded8873d13fd0a0d 了解しました。回答ありがとうございます。デザインを変更します。

行動規範の内容に同意します