疑似要素が効かないinputタグと、有効になるinputタグ

  • このエントリーをはてなブックマークに追加
  • LINEで送る

imgタグやinput[type=”text”]には疑似要素が使えない。

imgタグに使えないのは知っていたのですが
そういえばボタンやinput[type=”text”]には使えないのに、
input[type=checkbox]なんかは疑似要素使って見栄え変えてる人いるなー?と
思ったのでテストしてみました。

結果の画像

input各種に::beforeを指定した結果

結構有効になりますね…。どうゆう基準なんだろう。
rangeなんかは疑似要素が邪魔して右半分まで持っていけなかったり

テストしたHTML

<p>段落</p>
<ul>
<li><input type="text" value="text"></li>
<li><label><input type="radio">radio</label></li>
<li><label><input type="checkbox">checkbox</label></li>
<li><input type="button" value="ボタン"></li>
<li><input type="color"></li>
<li><input type="date"></li>
<li><input type="datetime-local"></li>
<li><input type="month"></li>
<li><input type="email" placeholder="email"></li>
<li><input type="file"></li>
<li><input type="number" placeholder="number"></li>
<li><input type="password" placeholder="password"></li>
<li><input type="range"></li>
<li><input type="image"></li>
</ul>

指定したCSS

input::after,
p::after{
  content:'【before】';
  display:inline-block;
}
  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメントを残す


You can add images to your comment by clicking here.