シンプルなアイコン付きのInput Textデザインです。
実ファイルや「Font Awesome」などを使用することも可能です。
<div class="cp_iptxt user"><input type="text" placeholder="お名前"></div>
<div class="cp_iptxt mail"><input type="text" placeholder="E-Mail"></div>.cp_iptxt {
position: relative;
width: 100%;
margin: 40px 0;
}
.cp_iptxt input[type='text'] {
font: 15px/1.6 sans-serif;
width: calc(100% - 50px);
margin: 0 0 0 40px;
padding: 5px;
border: 0;
background: transparent;
}
.cp_iptxt input[type='text']:focus,
.cp_iptxt input[type='text']:focus::after {
outline: none;
}
/*テキストエリアのアイコン*/
.cp_iptxt::before {
position: absolute;
top: 5px;
left: 10px;
content: '';
background-size: contain;
background-repeat: no-repeat;
width: 25px;
height: 25px;
}
.cp_iptxt.user::before {
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20id%3D%22user_00000089556898480809146080000015281947199695840938_%22%20x%3D%220%22%20y%3D%220%22%20style%3D%22enable-background%3Anew%200%200%20512%20512%22%20version%3D%221.1%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cstyle%3E.st0%7Bfill%3A%23aaa%7D%3C%2Fstyle%3E%3Cg%20id%3D%22user%22%3E%3Cpath%20id%3D%22body%22%20d%3D%22M465.2%20435.7v76H46.8v-76c0-79.6%2046.5-148.4%20113.9-180.6%2026.8%2022.2%2060.1%2034.2%2095.2%2034.2s68.5-12%2095.2-34.2c67.4%2032.2%20113.9%20101%20113.9%20180.6h.2z%22%20class%3D%22st0%22%2F%3E%3Cpath%20id%3D%22head%22%20d%3D%22M395.7%20139.7c0%2045.2-21.5%2085.4-54.7%20110.9-23.5%2018-53%2028.8-84.9%2028.8s-61.4-10.7-84.9-28.8c-33.3-25.5-54.7-65.7-54.7-110.9C116.3%2062.5%20178.9%200%20256%200s139.7%2062.5%20139.7%20139.7z%22%20class%3D%22st0%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E')
}
.cp_iptxt.mail::before {
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20id%3D%22mail%22%20x%3D%220%22%20y%3D%220%22%20style%3D%22enable-background%3Anew%200%200%20512%20512%22%20version%3D%221.1%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cstyle%3E.st0%7Bfill%3A%23aaa%7D%3C%2Fstyle%3E%3Cg%20id%3D%22mail_00000059300812860626865620000014156631405898964883_%22%3E%3Cpath%20id%3D%22body%22%20d%3D%22M512%20105.4v339.1H0V105.4l237.7%20183.8%2018.3%2014.1%2018.3-14.1L512%20105.4z%22%20class%3D%22st0%22%2F%3E%3Cpath%20id%3D%22head%22%20d%3D%22M512%2067.5%20256%20265.4%200%2067.5h512z%22%20class%3D%22st0%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E')
}
/*テキストエリアの下線*/
.cp_iptxt::after {
content: '';
display: block;
width: 100%;
height: 4px;
margin-top: -1px;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #da3c41;
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@CopypetJp More Info