コピペでできる！cssとhtmlのみでフォームのテキストエリアをわかりやすくするデザイン15選

CSS HTML
 
 

フォームはサイトにはかならず必要になってくるアイテムですが、わかりやすく間違えにくいものにしたいですよね。
テキストエリア[input type=”text”]のデザインにエフェクトを追加することで、
今までよりワンランク上のわかりやすさを手に入れましょう。

browser:  ✔︎ ✔︎ ✔︎ 

フォームのテキストエリアをわかりやすくするデザイン[15種]

シンプルなアイコン付き

ニャン易度 
<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;
}

シンプルなアイコン付きフォーカスあり

ニャン易度 
<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;
}

フォーカスでふわっと影が出る

ニャン易度 
<div class="cp_iptxt">
  <label class="ef">
  <input type="text" placeholder="お名前">
  </label>
</div>
<div class="cp_iptxt">
  <label class="ef">
  <input type="text" placeholder="E-Mail">
  </label>
</div>
.cp_iptxt {
  position: relative;
  width: 100%;
  margin: 40px 0;
}
.cp_iptxt input[type='text'] {
  font: 15px/1.6 sans-serif;
  box-sizing: border-box;
  width: 100%;
  padding: 0.3em;
  color: #aaaaaa;
  border: 1px solid #1b2538;
  border-radius: 4px;
  transition: 0.3s;
}
.ef input[type='text']:focus {
  border: 1px solid #da3c41;
  box-shadow: 0 0 5px 1px rgba(218,60,65, .5);
  outline: none;
}

フォーカスでふわっとラインの色が替わる

ニャン易度 
<div class="cp_iptxt">
  <label class="ef"><input type="text" placeholder="お名前"></label>
</div>
<div class="cp_iptxt">
  <label class="ef"><input type="text" placeholder="E-Mail"></label>
</div>
.cp_iptxt {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
}
.cp_iptxt input[type='text'] {
  font: 15px/1.6 sans-serif;
  width: 100%;
  color: #aaaaaa;
  border: 5px solid #1b2538;
  border-radius: 4px;
  transition: 0.3s;
}
.ef input[type='text']:focus {
  border: 5px solid #da3c41;
  outline: none;
}

フォーカスでふわっと下線の色が替わる

ニャン易度 
<div class="cp_iptxt">
  <label class="ef"><input type="text" placeholder="お名前"></label>
</div>
<div class="cp_iptxt">
  <label class="ef"><input type="text" placeholder="E-Mail"></label>
</div>
.cp_iptxt {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
}
.cp_iptxt input[type='text'] {
  font: 15px/1.6 sans-serif;
  width: 100%;
  padding: 0.3em;
  color: #aaaaaa;
  border: none;
  border-bottom: 2px solid #1b2538;
  background: transparent;
  transition: 0.3s;
}
.cp_iptxt .ef input[type='text']:focus {
  border-bottom: 2px solid #da3c41;
  outline: none;
}

フォーカスでへこみが浅くなる

ニャン易度 
<div class="cp_iptxt">
  <label class="ef"><input type="text" placeholder="お名前"></label>
</div>
<div class="cp_iptxt">
  <label class="ef"><input type="text" placeholder="E-Mail"></label>
</div>
.cp_iptxt {
  position: relative;
  width: 100%;
  margin: 10px 0;
}
.cp_iptxt input[type='text'] {
  font: 15px/1.6 sans-serif;
  width: calc(100% - 20px);
  padding: 0.3em;
  color: #aaaaaa;
  border: 1px solid #ffffff;
  box-shadow: 1px 1px 2px 0 #707070 inset;
  border-radius: 4px;
  transition: 0.3s;
}
.cp_iptxt .ef input[type='text']:focus {
  outline: none;
  box-shadow: inset 1px 1px 2px 0 #c9c9c9;
}

フォーカスで下線の色が変わって左から伸びる

ニャン易度 
<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>お名前</label>
  <span class="focus_line"></span>
</div>
<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>E-Mail</label>
  <span class="focus_line"></span>
</div>
.cp_iptxt {
  position: relative;
  width: 100%;
  margin: 20px 0;
}
.cp_iptxt input[type='text'] {
  font: 15px/1.6 sans-serif;
  width: 100%;
  padding-left: 4em;
  border: none;
  border-bottom: 1px solid #1b2538;
  background: transparent;
}
.cp_iptxt .ef {
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid #1b2538;
  background-color: transparent;
}
.cp_iptxt .ef ~ .focus_line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  transition: 0.4s;
  background-color: #da3c41;
}
.cp_iptxt .ef ~ label {
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  color: #aaaaaa;
  transition: 0.3s;
}
/*focus時の設定*/
.cp_iptxt input[type='text']:focus {
  outline: none;
}
.cp_iptxt .ef:focus ~ .focus_line {
  width: 100%;
  transition: 0.4s;
}
.cp_iptxt .ef:focus ~ label {
  font-size: 12px;
  top: -16px;
  transition: 0.3s;
  color: #da3c41;
}

フォーカスで下線の色が真ん中から替わる

ニャン易度 
<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>お名前</label>
  <span class="focus_line"></span>
</div>
<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>E-Mail</label>
  <span class="focus_line"></span>
</div>
.cp_iptxt {
  position: relative;
  width: 100%;
  margin: 20px 0;
}
.cp_iptxt input[type='text'] {
  font: 15px/24px sans-serif;
  width: 100%;
  padding-left: 4em;
  border: none;
  border-bottom: 1px solid #1b2538;
  background: transparent;
  border-radius: 0;
}
.cp_iptxt .ef {
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid #1b2538;
  background-color: transparent;
}
.cp_iptxt .ef ~ .focus_line {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  transition: 0.4s;
  background-color: #da3c41;
}
.cp_iptxt .ef ~ label {
  position: absolute;
  top: 4px;
  left: 0;
  transition: 0.3s;
  letter-spacing: 0.5px;
  color: #aaaaaa;
}
.cp_iptxt input[type='text']:focus {
  outline: none;
}
.cp_iptxt .ef:focus ~ .focus_line {
  left: 0;
  width: 100%;
  transition: 0.4s;
}
.cp_iptxt .ef:focus ~ label {
  font-size: 12px;
  top: -16px;
  transition: 0.3s;
  color: #da3c41;
}

フォーカスで下線の色が両端から替わる

ニャン易度 
<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>お名前</label>
  <span class="focus_line"></span>
</div>
<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>E-Mail</label>
  <span class="focus_line"></span>
</div>
.cp_iptxt {
  position: relative;
  width: 100%;
  margin: 20px 0;
}
.cp_iptxt input[type='text'] {
  font: 15px/24px sans-serif;
  width: 100%;
  padding-left: 4em;
  border: none;
  border-bottom: 1px solid #1b2538;
  background: transparent;
  border-radius: 0;
}
.cp_iptxt .ef {
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid #1b2538;
  background-color: transparent;
}
.cp_iptxt .ef ~ .focus_line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
}
.cp_iptxt .ef ~ .focus_line:before,
.cp_iptxt .ef ~ .focus_line:after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 0;
  height: 100%;
  background-color: #da3c41;
  transition: 0.4s;
}
.cp_iptxt .ef ~ .focus_line:after {
  right: 0;
  left: auto;
}
.cp_iptxt .ef ~ label {
  position: absolute;
  top: 4px;
  left: 0;
  transition: 0.3s;
  color: #aaaaaa;
}
.cp_iptxt input[type='text']:focus {
  outline: none;
}
.cp_iptxt .ef:focus ~ .focus_line:before,
.cp_iptxt .ef:focus ~ .focus_line:after {
  width: 50%;
  transition: 0.4s;
}
.cp_iptxt .ef:focus ~ label {
  font-size: 12px;
  top: -16px;
  transition: 0.3s;
  color: #da3c41;
}

フォーカスでボーダーの色がそれぞれの真ん中から切り替わる

ニャン易度 
<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>お名前</label>
  <span class="focus_line"><i></i></span>
</div>
<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>E-Mail</label>
  <span class="focus_line"><i></i></span>
</div>
.cp_iptxt {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 20px 0;
}
.cp_iptxt input[type='text'] {
  font: 15px/1.6 sans-serif;
  width: 100%;
  padding-left: 4em;
  border: 1px solid #1b2538;
  background: transparent;
  border-radius: 0;
  outline: none;
}
.cp_iptxt .ef {
  padding: 7px 14px;
  transition: 0.4s;
  border: 1px solid #1b2538;
  background: transparent;
}
.cp_iptxt .ef ~ .focus_line:before,
.cp_iptxt .ef ~ .focus_line:after {
  position: absolute;
  top: -1px;
  left: 50%;
  content: '';
  width: 0;
  height: 2px;
  background-color: #da3c41;
  transition: 0.4s;
}
.cp_iptxt .ef ~ .focus_line:after {
  top: auto;
  bottom: 0;
}
.cp_iptxt .ef ~ .focus_line i:before,
.cp_iptxt .ef ~ .focus_line i:after {
  position: absolute;
  top: 50%;
  left: 0;
  content: '';
  width: 2px;
  height: 0;
  background-color: #da3c41;
  transition: 0.6s;
}
.cp_iptxt .ef ~ .focus_line i:after {
  right: 0;
  left: auto;
}
.cp_iptxt .ef ~ label {
  position: absolute;
  left: 14px;
  color: #aaaaaa;
  transition: 0.3s;
}
.cp_iptxt .ef:focus ~ .focus_line:before,
.cp_iptxt .ef:focus ~ .focus_line:after {
  left: 0;
  width: 100%;
  transition: 0.4s;
}
.cp_iptxt .ef:focus ~ .focus_line i:before,
.cp_iptxt .ef:focus ~ .focus_line i:after {
  top: -1px;
  height: 100%;
  transition: 0.6s;
}
.cp_iptxt .ef:focus ~ label {
  font-size: 12px;
  top: -18px;
  left: 0;
  color: #da3c41;
  transition: 0.3s;
}

フォーカスでボーダーの色が左上・右下から切り替わる

ニャン易度 
<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>お名前</label>
  <span class="focus_line"><i></i></span>
</div>
<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>E-Mail</label>
  <span class="focus_line"><i></i></span>
</div>
.cp_iptxt {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 20px 0;
}
.cp_iptxt input[type='text'] {
  font: 15px/1.6 sans-serif;
  width: 100%;
  padding-left: 4em;
  border: 1px solid #1b2538;
  background: transparent;
  border-radius: 0;
  outline: none;
}
.cp_iptxt .ef {
  padding: 7px 14px;
  border: 1px solid #1b2538;
  background: transparent;
  transition: 0.4s;
}
.cp_iptxt .ef ~ .focus_line:before,
.cp_iptxt .ef ~ .focus_line:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 0;
  height: 2px;
  background-color: #da3c41;
  transition: 0.3s;
}
.cp_iptxt .ef ~ .focus_line:after {
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
}
.cp_iptxt .ef ~ .focus_line i:before,
.cp_iptxt .ef ~ .focus_line i:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 2px;
  height: 0;
  background-color: #da3c41;
  transition: 0.4s;
}
.cp_iptxt .ef ~ .focus_line i:after {
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
}
.cp_iptxt .ef:focus ~ .focus_line:before,
.cp_iptxt .ef:focus ~ .focus_line:after {
  width: 100%;
  transition: 0.3s;
}
.cp_iptxt .ef:focus ~ .focus_line i:before,
.cp_iptxt .ef:focus ~ .focus_line i:after {
  height: 100%;
  transition: 0.4s;
}
.cp_iptxt .ef ~ label {
  position: absolute;
  left: 14px;
  color: #aaaaaa;
  transition: 0.3s;
}
.cp_iptxt .ef:focus ~ label {
  font-size: 12px;
  top: -18px;
  left: 0;
  color: #da3c41;
  transition: 0.3s;
}

フォーカスでボーダーの色が左上からぐるっと切り替わる

ニャン易度 
<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>お名前</label>
  <span class="focus_line"><i></i></span>
</div>
<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>E-Mail</label>
  <span class="focus_line"><i></i></span>
</div>
.cp_iptxt {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 20px 0;
}
.cp_iptxt input[type='text'] {
  font: 15px/1.6 sans-serif;
  width: 100%;
  padding-left: 4em;
  border: 1px solid #1b2538;
  background: transparent;
  border-radius: 0;
  outline: none;
}
.cp_iptxt .ef {
  padding: 7px 14px;
  border: 1px solid #1b2538;
  background: transparent;
  transition: 0.4s;
}
.cp_iptxt .ef ~ .focus_line:before,
.cp_iptxt .ef ~ .focus_line:after {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  width: 0;
  height: 2px;
  background-color: #da3c41;
  transition-delay: 0.2s;
  transition: 0.2s;
}
.cp_iptxt .ef ~ .focus_line:after {
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  transition-delay: 0.6s;
}
.cp_iptxt .ef ~ .focus_line i:before,
.cp_iptxt .ef ~ .focus_line i:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 2px;
  height: 0;
  background-color: #da3c41;
  transition: 0.2s;
}
.cp_iptxt .ef ~ .focus_line i:after {
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
  transition-delay: 0.4s;
}
.cp_iptxt .ef ~ label {
  position: absolute;
  left: 14px;
  color: #aaaaaa;
  transition: 0.3s;
}
.cp_iptxt .ef:focus ~ .focus_line:before,
.cp_iptxt .ef:focus ~ .focus_line:after {
  width: 100%;
  transition: 0.2s;
  transition-delay: 0.6s;
}
.cp_iptxt .ef:focus ~ .focus_line:after {
  transition-delay: 0.2s;
}
.cp_iptxt .ef:focus ~ .focus_line i:before,
.cp_iptxt .ef:focus ~ .focus_line i:after {
  height: 100%;
  transition: 0.2s;
}
.cp_iptxt .ef:focus ~ .focus_line i:after {
  transition-delay: 0.4s;
}
.cp_iptxt .ef:focus ~ label {
  font-size: 12px;
  top: -18px;
  left: 0;
  color: #da3c41;
  transition: 0.3s;
}

フォーカスで背景が左から替わる

ニャン易度 
<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>お名前</label>
  <span class="focus_bg"></span>
</div>
<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>E-Mail</label>
  <span class="focus_bg"><i></i></span>
</div>
.cp_iptxt {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 20px 0;
}
.cp_iptxt input[type='text'] {
  font: 15px/1.6 sans-serif;
  width: 100%;
  padding-left: 4em;
  border: 1px solid #1b2538;
  background: transparent;
  border-radius: 0;
  outline: none;
}
.cp_iptxt .ef {
  position: relative;
  padding: 7px 15px;
  border: 0;
  border: 1px solid #1b2538;
  background: transparent;
}
.cp_iptxt .ef ~ .focus_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: transparent;
  transition: 0.4s;
}
.cp_iptxt .ef ~ label {
  position: absolute;
  left: 14px;
  color: #aaaaaa;
  transition: 0.3s;
}
.cp_iptxt .ef:focus {
  border: 1px solid #da3c41;
}
.cp_iptxt .ef:focus ~ .focus_bg {
  width: 100%;
  background-color: rgba(218,60,65,.3);
  border: 1px solid #da3c41;
  transition: 0.4s;
}
.cp_iptxt .ef:focus ~ label {
  font-size: 12px;
  top: -18px;
  left: 0;
  color: #da3c41;
  transition: 0.3s;
}

フォーカスで背景が両端から替わる

ニャン易度 
<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>お名前</label>
  <span class="focus_bg"></span>
</div>
<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>E-Mail</label>
  <span class="focus_bg"></span>
</div>
.cp_iptxt {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 20px 0;
}
.cp_iptxt input[type='text'] {
  font: 15px/1.6 sans-serif;
  width: 100%;
  padding-left: 4em;
  border: 1px solid #1b2538;
  background: transparent;
  border-radius: 0;
  outline: none;
}
.cp_iptxt .ef {
  position: relative;
  padding: 7px 15px;
  border: 0;
  border: 1px solid #1b2538;
  background: transparent;
}
.cp_iptxt .ef ~ .focus_bg:before,
.cp_iptxt .ef ~ .focus_bg:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 0;
  height: 0;
  background-color: rgba(218,60,65,.3);
  transition: 0.3s;
}
.cp_iptxt .ef:focus {
  border: 1px solid #da3c41;
}
.cp_iptxt .ef:focus ~ .focus_bg:before {
  width: 50%;
  height: 100%;
  transition: 0.3s;
}
.cp_iptxt .ef ~ .focus_bg:after {
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
}
.cp_iptxt .ef:focus ~ .focus_bg:after {
  width: 50%;
  height: 100%;
  transition: 0.3s;
}
.cp_iptxt .ef ~ label {
  position: absolute;
  left: 14px;
  color: #aaaaaa;
  transition: 0.3s;
}
.cp_iptxt .ef:focus ~ label {
  font-size: 12px;
  top: -18px;
  left: 0;
  color: #da3c41;
  transition: 0.3s;
}

フォーカスで背景が真ん中から替わる

ニャン易度 
<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>お名前</label>
  <span class="focus_bg"></span>
</div>
<div class="cp_iptxt">
  <input class="ef" type="text" placeholder="">
  <label>E-Mail</label>
  <span class="focus_bg"></span>
</div>
.cp_iptxt {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 20px 0;
}
.cp_iptxt input[type='text'] {
  font: 15px/1.6 sans-serif;
  width: 100%;
  padding-left: 4em;
  border: 1px solid #1b2538;
  background: transparent;
  border-radius: 0;
  outline: none;
}
.cp_iptxt .ef {
  position: relative;
  padding: 7px 15px;
  border: 0;
  border: 1px solid #1b2538;
  background: transparent;
}
.cp_iptxt .ef ~ .focus_bg:before,
.cp_iptxt .ef ~ .focus_bg:after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  width: 0;
  height: 0;
  background-color: rgba(218,60,65,.3);
  transition: 0.3s;
}
.cp_iptxt .ef ~ .focus_bg:after {
  top: auto;
  right: 50%;
  bottom: 50%;
  left: auto;
}
.cp_iptxt .ef ~ label {
  position: absolute;
  left: 14px;
  color: #aaaaaa;
  transition: 0.3s;
}
/*focus時の設定*/
.cp_iptxt .ef:focus {
  border: 1px solid #da3c41;
}
.cp_iptxt .ef:focus ~ .focus_bg:before {
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  transition: 0.3s;
}
.cp_iptxt .ef:focus ~ .focus_bg:after {
  right: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  transition: 0.3s;
}
.cp_iptxt .ef:focus ~ label {
  font-size: 12px;
  top: -18px;
  left: 0;
  color: #da3c41;
  transition: 0.3s;
}

ラジオボタンの装飾についてはこちら

copypet.jp

コピペでできる！cssとhtmlのみでフォームのラジオボタンをわかりやすくするデザイン10選 | copypet.jp｜パーツで探す、web制作に使えるコピペサイト。

フォームはサイトにはかならず必要になってくるアイテムですが、わかりやすく間違えにくいものにしたいですよね。 ラジオボタン[input type="radio"]のデザインにエフェクトを追加することで、 今までよりワンランク上のわかりやすさを手に入れましょう。…

copypet.jp

記事を見る

チェックボックスの装飾についてはこちら

copypet.jp

コピペでできる！cssとhtmlのみでフォームのチェックボックスをわかりやすくするデザイン10選 | copypet.jp｜パーツで探す、web制作に使えるコピペサイト。

フォームはサイトにはかならず必要になってくるアイテムですが、わかりやすく間違えにくいものにしたいですよね。 チェックボックス[input type="checkbox"]のデザインにエフェクトを追加することで、 今までよりワンランク上のわかりやすさを手に入れましょう。…

copypet.jp

記事を見る

copypet.jp

CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか？