Webデザイン参考記事まとめ アプデ(UPDE) - Webデザイナー/クリエイター向けの最新情報まとめアンテナ。

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

http://kachibito.net

WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ

今日のwebデザイン記事ランキングを見る

Ads

WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『チェックボックスにチェックが入ると入力できるようになるinput要素をCSSだけで作る』についてまとめています。

この記事は特にレスポンシブ・Googleについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。

Ads

最近の人気記事

人気のタグ