2023.05.07
【CSS】input[type="submit"]で設定している検索ボタンをSVGにする
疑似要素を使用できないinput要素[type="submit"]で設定している検索ボタンを虫眼鏡画像やSVGで設定する方法。
input要素[type="submit"]を「label」で囲む
<input type="text" value="" name="s" id="s" />
<label>
<input type="submit" id="searchsubmit" value="">
<svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<path class="st0" d="M361.7,301.5c19.4-30.4,30.6-66.5,30.6-105.2C392.3,88,304.3,0,196.2,0C157.5,0,121.4,11.2,91,30.7
C66.7,46.1,46.1,66.8,30.7,91C11.3,121.4,0,157.6,0,196.3c0,108.2,88,196.3,196.2,196.3c38.7,0,74.8-11.3,105.2-30.7
C325.6,346.4,346.2,325.8,361.7,301.5z M259.8,320.2c-19.1,9.8-40.7,15.4-63.6,15.4c-76.8,0-139.3-62.5-139.3-139.4
c0-22.9,5.6-44.6,15.4-63.6c13.3-25.9,34.5-47,60.3-60.3c19.1-9.8,40.7-15.4,63.6-15.4c76.8,0,139.3,62.5,139.3,139.4
c0,22.9-5.6,44.5-15.4,63.6C306.7,285.7,285.6,306.9,259.8,320.2z"/>
<path class="st0" d="M499.5,439.2l-113.2-113c-16.1,23.6-36.8,44.2-60.3,60.3l113.2,113c8.3,8.3,19.2,12.5,30.1,12.5
c10.9,0,21.8-4.2,30.2-12.5C516.2,482.8,516.2,455.8,499.5,439.2z"/>
</g>
</svg>
</label>