シンプルなアイコン付きのInput Textデザインです。
フォーカスでラインとアイコンの色が変わります。
imgタグで設定しfilterプロパティを使って色を変更する方法もあります。
ただ、「focus」や「hoveｒ」等で使用するとチラつくことがあるので、今回はmaskを使用しています。
<div class="cp_iptxt">
<input type="text" placeholder="お名前">
<div class="svg_user"></div>
</div>
<div class="cp_iptxt">
<input type="text" placeholder="E-Mail">
<div class="svg_mail"></div>
</div>.cp_iptxt {
position: relative;
width: 100%;
margin: 40px 0;
display: flex;
align-items: center;
justify-content: center;
}
.cp_iptxt input[type=text] {
font: 15px/1.6 sans-serif;
box-sizing: border-box;
width: 100%;
padding: 0.3em;
transition: 0.3s;
border: 1px solid #1b2538;
border-radius: 4px;
outline: none;
}
.cp_iptxt input[type=text] {
padding-left: 40px;
}
.cp_iptxt [class^="svg_"] {
position: absolute;
left: 10px;
mask-repeat: no-repeat;
mask-position: center center;
mask-size: contain;
width: 20px;
height: 20px;
background-color: #aaaaaa;
transition: 0.3s;
}
.cp_iptxt .svg_user {
mask-image: url("user.svg");
}
.cp_iptxt .svg_mail {
mask-image: url("mail.svg");
}
/*focus時の設定*/
.cp_iptxt input[type=text]:focus {
border-color: #da3c41;
}
.cp_iptxt input[type=text]:focus + [class^="svg_"] {
background-color: #da3c41;
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@CopypetJp More Info