2019年08月5日(月)
チェックボックスにチェックが入ると入力できるようになるinput要素をCSSだけで作る
Result
See the Pen Locked input field – CSS only by kachibito
(@kachibito) on CodePen.
ちょっと今更感ありますけど、チェックボックスがチェックされるとinputが入力できるようになるやつです上のUIは少し違いますけど、鍵の部分がチェックボックスになっています。よくある「同意するにチェックを入れて~」的なやつに使えそうでしょうか。
※この同意する云々のUIの意味に対する是非はここでは割愛しますcss
div { --field-size: 50px; --field-border-color: #ccc; margin: auto; top:40px; font-size: 1rem; background: #ffffff; border-radius: 5px; position: relative; width: 400px; overflow: hidden; display: flex; background: white; } div input[type="checkbox"] { posi...
author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
関連記事
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『チェックボックスにチェックが入ると入力できるようになるinput要素をCSSだけで作る』についてまとめています。
この記事は特にレスポンシブ・Googleについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。