<input>要素では疑似要素を使うことができません。この記事ではその場合の対策を紹介しています。
フォームのボタン要素を疑似要素でカスタマイズしたい！なんて方は是非読んでみてください。
input要素と疑似要素の関係について
検索フォームのカスタマイズで「検索ボタンの上に虫眼鏡アイコンをつけたい！」という要望に応えようとした時に、今回の問題に当たりました。
最初は疑似要素を使ってすぐにできると思っていたのですが、いくらやっても表示されず、しっかり調べてみると<input>要素には疑似要素が使えないという事実にぶつかったわけです。
結論としては、::beforeや::afterといった疑似要素は置換要素に適用できません。そして、<input>要素は置換要素という扱いになるので適用されなかったわけですね。
input要素の仕様をMDNで確認してみると
特定の場合 (特に文字列入力ではなく特別なインターフェイスを持っている場合)、
MDN<input>要素は置換要素になります。
と書かれています。この書き方だと、置換要素になる場合とならない場合があるようですが、私がChromeで試した限りではtype="text"のような文字入力するタイプでも疑似要素は無効でした。
基本的に<input>要素では疑似要素は使えないと考えておいた方がよさそうです。
対策はdiv要素で囲む
対策は非常にシンプルで、疑似要素を適用させたい<input>要素を<div>タグで囲むだけです。
そして、囲んだ<div>要素に疑似要素を適用してレイアウトを整えます。
今回はWordPressでよく使う検索フォームのソースを例にしてみます。
<form method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<input type="text" value="" name="s" id="s" placeholder="" />
<input type="submit" id="searchsubmit" value="検索"/>
</form>この検索フォームはCSSを何も適用しないと下図のように表示されます。
まず、次のようにtype="submit"の<input>要素を<div>タグで囲みます。クラス名はなんでもよいですが、ここではclass="search_button"としました。
<form method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<input type="text" value="" name="s" id="s" placeholder="" />
<div class="search_button"><input type="submit" id="searchsubmit" value="検索"/></div>
</form>このHTMLに次のようなCSSを適用させることで三角矢印付きのボタンを表示させることができます。
input[type="text"] {
font-size: 18px;
border: 1px solid #ccc;
border-radius: 5px;
padding:3px;
}
input[type="submit"] {
-webkit-appearance: none;
border: none;
background-color: transparent;
font-size: 14px;
}
.search_button {
display: inline-block;
background-color:#ccc;
border-radius:5px;
padding:3px 10px 1px;
}
.search_button::before {
content: '◀';
font-size: 14px;
display:inline;
}
疑似要素のcontent属性の内容とレイアウトを工夫すれば色々なタイプのボタンを作ることができます。
ちなみに、どうしても<input>要素を<div>タグで囲むことができない場合は、position:absolute;なんかを駆使して無理矢理アイコン要素をもってくるなどする必要がありそうです。
[…] input要素には疑似要素が使えない：明日のための記録 […]