inputのradioボタンをカスタマイズしようとして、borderが効かない時・・・

はじめに

radioボタンのカスタマイズ、超めんどくせぇ・・・

そう思いませんか？擬似要素を使ったり、何か色々とコネコネせんとダメっぽい・・

と言うのを、思い知った記念の記事となります！

環境

・Nuxt.js
・bootstrap

あれ？radioボタンの色が変わらんのやけど？？

普通にinputタグのbackgroundとborderを変えたらいいのかな〜？とか思ってると、全然ダメでした。。。

index.vue

<template>
  <div>
        <input
          type="radio"
          v-for="j in question.num"
          :key="j"
          :value="Number(j)"
        />
  </div>
</template>

<style scoped>
input {
  background: greenyellow;
  border: red;
  width: 20px;
  height: 20px;
}
</style>

なんでやねん！！

結論、擬似要素を使わないと無理です！！

「みんなやたらと擬似要素使ってるな〜」とか思ってると、、そもそも擬似要素を使わないとinputをカスタマイズすることは無理っぽいようでした・・

index.vue

<template>
  <div>
        <input
          type="radio"
          v-for="j in question.num"
          :key="j"
          :value="Number(j)"
        />
  </div>
</template>

<style scoped>
input[type="radio"] {
  -webkit-appearance: none;  /* フォーム要素のスタイルを初期化 */
  width: 20px;
  height: 20px;
  border: 1px solid red;
  border-radius: 50%;
}
/* 内側のマル */
input[type="radio"]:before {
  content: "";
  display: block;
  width: 60%;
  height: 60%;
  margin: 20% auto;
  border-radius: 50%;
}
/* 選択された時の内側のマルの色 */
input[type="radio"]:checked:before {
  background: greenyellow;
}
</style>

重要なポイント

いくつか重要なポイントをご紹介！

まずはinputを初期化しないといけません！！

-webkit-appearance: none;  /* フォーム要素のスタイルを初期化 */

👆これ超重要！
これがないとborderが効きませんでした
これを追加することによって、自由にinputをカスタマイズすることが可能になります。

checked attributeを追加させるような処理は、特に何も書いていません！！

checked attributeとは👇こーゆーの

<input type="radio" checked>

もしchecked attributeが無いと、こんな感じになってしまいます！

input[type="radio"] {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid red;
  border-radius: 50%;
}

input[type="radio"]:before {
  content: "";
  display: block;
  width: 60%;
  height: 60%;
  margin: 20% auto;
  border-radius: 50%;
  background: greenyellow;
}

参考