html选择按键点击后锁死输入框_纯CSS锁定的输入框

最新推荐文章于 2024-09-20 16:55:43 发布

下厨房

最新推荐文章于 2024-09-20 16:55:43 发布

阅读量541

点赞数

文章标签： html选择按键点击后锁死输入框

本文链接：https://blog.csdn.net/weixin_29091105/article/details/112827805

版权

css

@import url("https://fonts.googleapis.com/css?family=Fira+Sans:300&display=swap");

html {

box-sizing: border-box;

}

*:before,

*:after {

box-sizing: inherit;

}

html,

body {

height: 100vh;

}

body {

display: flex;

align-items: center;

background: #252525;

color: #4a5568;

height: 100%;

font-size: 16px;

font-family: "Fira Sans", sans-serif;

}

div {

--field-size: 50px;

--field-border-color: #ccc;

margin: 0 auto;

font-size: 1rem;

box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

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("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233fc079' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 9.9-1'%3E%3C/path%3E%3C/svg%3E");

background-repeat: no-repeat;

background-position: center center;

background-size: 50%;

}

div input[type="checkbox"]:checked + span {

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 {

-webkit-transform: translateY(-100%);

transform: translateY(-100%);

}

div input[type="checkbox"]:checked + span::before {

-webkit-transform: translateY(100%);

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("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23909090' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-lock'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E");

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);