私は現在、ラジオボタンとチェックボックスに基づいた私のアイデアの大きな部分がある学校プロジェクトに取り組んでいます。私はそれらを作成する方法について多くのコードがありますが、唯一の問題は特定のHTMLタグとjQueryを使用できないことです。htmlとcssだけでチェックボックスとラジオボタンを作成するには
私が使用できるタグ：
HTML、頭部、胴体、タイトル、メタ•、リンク
•ヘッダー、セクション、記事、H1•DIV
•フッター
-h6
•p
•span
•UL、OL、オーディオ
•IMG
•
•リチウム
は、これらのタグでチェックボックスやラジオボタンを作成する方法はありますか？
ユーザーのデータをHTML形式で入力する場合、唯一のオプションは入力のタグです。で公式見マニュアルを参照してください：
https://www.w3schools.com/html/html_form_input_types.asp
のみ許可されたタグとあなたがラジオボタンやチェックボックスを作成することはできません。
私は入力を許可されていません！別の方法がありますか？ –
ネイティブJavascriptでフィールドを動的に生成することはできませんか？ – atrujillofalcon
ラジオボタン
私はラジオボタンを行う方法を考え出したが、彼らは唯一の限りそのうちの一つがフォーカスされているとして働いています。
.radio {
display: inline-block;
position: relative;
margin-left: 1em;
padding-left: 1.5em;
}
.radio::before {
content: "";
display: inline-block;
border: 1px solid black;
width: 1em;
height: 1em;
border-radius: 100%;
position: absolute;
left: 0;
top: 0;
}
.radio:focus {
outline: none;
}
.radio:focus::after {
content: "";
display: inline-block;
border: 1px solid black;
width: 0.5em;
height: 0.5em;
border-radius: 100%;
position: absolute;
background-color: black;
left: 0.25em;
top: 0.25em;
}<ul class="radio-group">
<li tabindex="0" class="radio">Option 1</li>
<li tabindex="0" class="radio">Option 2</li>
<li tabindex="0" class="radio">Option 3</li>
</ul>ここで重要な要素は、彼らがフォーカス可能になり、そのtabindex<li>内の項目です。
tabindexグローバル属性は、その要素がフォーカスできるかどうか、およびシーケンシャルなキーボードナビゲーション（通常はTabキー、したがって名前付き）に参加するかどうかを示します。これは、異なる結果が整数の値に応じて、値として整数を受け入れる：[...]
をチェックボックス
私はそれらをスタイルが、私はそれを動作させる方法について見当もつかないJSなし。 （今はラジオのように振る舞います。）
.check {
display: inline-block;
position: relative;
margin-left: 1em;
padding-left: 1.5em;
}
.check::before {
content: "";
display: inline-block;
border: 1px solid black;
width: 1em;
height: 1em;
position: absolute;
left: 0;
top: 0;
}
.check:focus {
outline: none;
}
.check:focus::after {
content: "";
display: inline-block;
border-left: 3px solid black;
border-bottom: 3px solid black;
transform: rotate(-45deg);
width: 1em;
height: 0.5em;
position: absolute;
left: 0.1em;
top: -0.1em;
}<ul class="check-boxes">
<li tabindex="0" class="check">Option 1</li>
<li tabindex="0" class="check">Option 2</li>
<li tabindex="0" class="check">Option 3</li>
</ul>ヒント：状態を保存するのと同様のリモートで私の心に来るだけの純粋なCSSの事はCSS countersだろうが、あなたは上のベースのセレクタを構築することはできませんので、カウンターの値...
彼らはショーのためだけでない限り - 私の答えを参照してください。 –
あなたは 'input'要素を使用することが許されていない場合、ラジオ/チェックボックスのボタンが答えであるとは思わないので、より一般的な意味で達成しようとしているもので質問を更新することをお勧めします – ptr
何ですか？実際に達成しようとしている？ –