Result
ちょっと今更感ありますけど、チェックボックスがチェックされると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"] { position: absolute; opacity: 0; width: var(--field-size); height: var(--field-size); cursor: pointer; padding: 0; margin: 0;}div input[type="checkbox"]:hover + span { background-image: url("unlock.png"); background-repeat: no-repeat; background-position: center center; background-size: 50%;}div input[type="checkbox"]:checked + span { background-image: url("unlock.png"); background-repeat: no-repeat; background-position: center center; background-size: 50%;}div input[type="checkbox"]:checked + span::before,div input[type="checkbox"]:checked + span::after { pointer-events: none;}div input[type="checkbox"]:checked + span::after { transform: translateY(-100%);}div input[type="checkbox"]:checked + span::before { transform: translateY(100%);}div input[type="checkbox"] + span { width: var(--field-size); height: var(--field-size); border-right: 1px solid var(--field-border-color); background-image: url("lock.png"); background-repeat: no-repeat; background-position: center center; background-size: 50%; cursor: pointer;}div input[type="checkbox"] + span::after,div input[type="checkbox"] + span::before { content: ""; position: absolute; right: 0; height: 50%; left: var(--field-size); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); background: rgba(0, 0, 0, 0.075); z-index: 2; cursor: not-allowed;}div input[type="checkbox"] + span::after { top: 0;}div input[type="checkbox"] + span::before { bottom: 0;}div input[type="text"] { padding: 1em; border: 0; flex: 1; font-size: 1rem; --placeholder-color: #ababab; font-family: inherit;} |
disable風に見せかけて、実際はpointer-events: none;とcursor: not-allowed;、背景カラーのグレー化でそれっぽく見せてるだけです。ロック/アンロックのスイッチは隣接セレクタで実装します
分かりにくいかもしれないので部分的なサンプルを用意しました。
以下はinput要素にpointer-events: none;を指定すると選択不能になる、のサンプルです。
手前のチェックボックスにチェックが入ってないと、隣接するinput要素がこの状態になっている上に背景色やマウスポインターが変更あれた状態なのでdisableの状態に見える、という仕組みです。
html
<div> <input type="checkbox" /> <span></span> <input type="text" placeholder="hogehoge" /></div> |
空要素が気になる方はちょっと気持ち悪いかもしれませんね。必要に応じて便宜工夫してください
can i use
pointer-eventsのブラウザ対応状況です。概ね動作するみたい
