ラジオボタンの左側の丸い部分が表示されない。

Question

実現したいこと

radioボタンの左の丸い部分が表示されない。

前提

・destyle.cssを使用
・選択肢が2つあるタイプのラジオボタンを作成したいが左側の丸い部分が表示されない。

該当のソースコード

<form action="" method="post" name="form">
  <label><input class="form-radio" type="radio" name="consultation" value="that" checked>〇〇について</label>
  <label><input class="form-radio" type="radio" name="consultation" value="other">その他ご相談</label>
</form>

css
なし

試したこと

inputに対してwidth,heightを指定→表示されない
inputに対してborderとradiusを使用して作成→表示されない

補足情報（FW/ツールのバージョンなど）

vsコードで作成しています。
開発者ツールはedge,cromeで確認しました。

Answer 1

destyle はフォーム部品のスタイルも消してしまいます。

button, select, textarea and input are reset using appearance: none.
nicolas-cusan/destyle.css: Opinionated reset stylesheet that provides a clean slate for styling your html.

再表示させるなら、以下のようにするといいかもしれません。

        input {
            appearance: revert;
        }

Comments

[bixidamakororo]

解決しました！ありがとうございます。

[Lhankor_Mhy]

お役に立てたようで何よりです。