CSS

input要素に擬似要素を適用させたい

ここでは、input要素でボタンに擬似要素を適用させたい方が参考になりそうなお話をします。結論から言うと、input要素に疑似要素は適用できません。

例えば、リンクタグならこういうデザインが素直に作れるわけですが(疑似要素で右に矢印を入れています)。

See the Pen button01 by kenichi (@ken81) on CodePen.

HTML

<a href="#" class="button">申込み</a>

CSS

a.button {
  display: block;
  margin:0 auto;
  text-decoration: none;
  border: none;
  outline: 0;
  cursor: pointer;
  color: #fff;
  background: #555;
  font-weight: bold;
  position: relative;
  height: 3.0em;
  line-height: 3.0em;
  width: 100px;
  padding: 0 0.8em 0 1.2em;
  transition: 0.5s;
}
a.button::after{
  transition: 0.5s;
  content: "";
  width: .6em;
  height: .6em;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  top: -2px;
  bottom: 0;
  right: 20px;
  margin: auto;
  -webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
a.button:hover::after{
  right: 12px;
}
a.button:hover {
  background: #134767;
}

input要素をボタンにしたものでは同じように行きません。

See the Pen button02 by kenichi (@ken81) on CodePen.

HTML

<input type="submit" value="申込み"></div>

CSS

input[type="submit"]{
  display: block;
  margin:0 auto;
  text-decoration: none;
  border: none;
  outline: 0;
  cursor: pointer;
  color: #fff;
  background: #555;
  font-weight: bold;
  position: relative;
  height: 3.0em;
  line-height: 3.0em;
  width: 100px;
  padding: 0 0.8em 0 1.2em;
  transition: 0.5s;
}
input[type="submit"]::after{
  transition: 0.5s;
  content: "";
  width: .6em;
  height: .6em;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  top: -2px;
  bottom: 0;
  right: 20px;
  margin: auto;
  -webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
input[type="submit"]:hover::after{
  right: 12px;
}
input[type="submit"]:hover {
  background: #134767;
}

上記は、inputタグに同じスタイルシートを適用させた例です。

input要素は置換要素といって少し特殊な要素のため疑似要素が効きません。でも、お問合せフォームなどで送信ボタンがinput要素になっている場合はどうしたらよいでしょうか。そういうときは、次のようにします。

See the Pen button03 by kenichi (@ken81) on CodePen.

HTML

<div class="button_wrap"><input type="submit" value="申込み"></div></div>

CSS

input[type="submit"]{
  font-size: 1.0em;
  display: block;
  border: none;
  outline: 0;
  cursor: pointer;
  color: #fff;
  background: #555;
  font-weight: bold;
  height: 3.0em;
  line-height: 3.0em;
  width: 100%;
  padding: 0 2.5em 0 0.8em;
  transition: 0.3s;
}
.button_wrap{
  color: #fff;
  position: relative;
  line-height: 2.8em;
  width: 130px;
  transition: 0.5s;
  margin:0 auto;
}
.button_wrap::after{
  transition: 0.3s;
  content: "";
  width: .6em;
  height: .6em;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
  -webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.button_wrap:hover::after{
  right: 12px;
}
input[type="submit"]:hover {
  background: #134767;
}

ポイントはinput要素をdivでラップすることです。

どうしてもinput要素に疑似要素を入れたい場合は、inputをdiv要素などでラップして、それに対してにスタイルシートを組みます。これで、実装できました。

最近の記事

  1. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  2. CSS

    CSS|中央寄せが効かないときは・・・
  3. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  4. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  5. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
PAGE TOP