HTMLの要素を塗りつぶしたい

Question

例えば次のようなチェックボックスがあった場合

![

以下のように塗りつぶしを行いたいです。

文字色と背景色を同色で塗りつぶせば良いかとも思いましたがそれではチェックボックス自体が塗りつぶされません。
何か良い方法はございますでしょうか。
塗りつぶしたいのはチェックボックスだけでなくラジオボタンやテキストエリアなど様々でサイズなども可変になります。

Answer 1

checkboxやradioボタンのborderやbackground, shadowなどを全て塗りつぶしていくしかないと思います。

また、ちょっときもいですがcheckboxなどのopacityを0にするのもありだと思います

Comments

[clubman]

ご回答ありがとうございます。
opacityを0にするとは考えつきませんでした。
ありがとうございます。

Answer 2

#box form span {
  position:relative;
  display:inline-block;
}

#box form span::after {
  position:absolute;
  left:0;
  top:0;
  display:block;
  content:"";
  background-color:#ccc;
  width:100%;
  height:100%;
}

<div id="box">
  <form>
    <span><input type="checkbox"><label>ほげ</label></span>
    <span><input type="radio"><label>ほげ</label></span>
    <span><input type="text"></span>
  </form>
</div>

Comments

[clubman]

ご回答ありがとうございます。
具体的なコードまで示していただき感謝いたします。
試してみたところ思った通りにできました。
重ねてお礼申し上げます。

Answer 3

visibility : hidden または display : none で非表示にするのはダメでしょうか？

Comments

[clubman]

ご回答ありがとうございます。
残念ながらまったくの非表示にするのは要件ではないのです。。

Answer 4

<span>か何かで<input>をラップしてやって、<input>を visiblity:hidden に <span>を background-color: gray にしてやれば達成できると思います。

Comments

[clubman]

ご回答ありがとうございます。
YukitomoNishinoさんが具体的なコードを提示してくださいました。