Result ちょっと今更感ありますけど、チェックボックスがチェックされるとinputが入力できるようになるやつです。上のUIは少し違いますけど、鍵の部分がチェックボックスになっています。 よくある「同意するにチェックを入れて~」的なやつに使えそうでしょうか。 ※この同意する云々のUIの意味に対する是非はここでは割愛します cssdiv { --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[
![チェックボックスにチェックが入ると入力できるようになるinput要素をCSSだけで作る](https://cdn-ak-scissors.b.st-hatena.com/image/square/b6b1c87ada2ad66409793e3653c810e333009609/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2019%2F12%2Fsite-icon.png)