LoginSignup
23
22

More than 5 years have passed since last update.

@anchoor

HTML5とCSS3でズンドコキヨシもどき

Last updated at Posted at 2016-03-17

ズンドコブームにのって、HTML5とCSS3で挑戦しました。
入力欄に「ズンズンズンズンドコ」というフレーズが入力されると「キ・ヨ・シ！」します。

See the Pen HTML5とCSS3でズンドコ by anchoor (@anchoor) on CodePen.

せいいっぱいの実装

  • input要素のpattern属性で入力値バリデーションする
  • 入力値がvalidな場合、:valid疑似クラスを利用して「キ・ヨ・シ！」を出す
    • input要素には::after疑似要素を使えないため、「キ・ヨ・シ！」用にspan要素を配置する
  • 入力値がvalidな場合、入力欄より一回り大きいspanを上にかぶせて以降の入力を不可とする（美しくないしフォーカスがそのままだと入力できてしまう…:astonished:）
23
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
23
22