CSSでパスコードの打ち込みUIのスタイリングを実装しよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

前提事項

Chromeで動作確認をしています。

実装するもの

今回は、パスコード打ち込みUIをCSSでスタイリングします。

demoは「こちら」で確認できます。

ワークスペース

必要なファイルは、以下の通りです。

JavaScript版

HTML & JavaScript

スタイリング

CSSでスタイリングしていきます。項目に出てくるbodyやcontainerは、HTMLの要素です。

全体の設定

bodyの設定

containerの設定

code-containerの設定

codeの設定

code:validの設定

infoの設定

スピンボタン非表示の設定

これで、完成です。

おわりに

初めて知ったのですが、「.code::-webkit-outer-spin-button」、「.code::-webkit-inner-spin-button」の指定で、スピンボタンを非表示にすることができるんですね。

公式には、「Non-standard」と記載があるので、アプリケーションに組み込むときは注意が入りそうですが、知識として知っておいて損はないと思います^^

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す