資訊專欄INFORMATION COLUMN
摘要：作為選擇器時，會選中所有和同輩的元素。代碼簡單登錄框用戶名密碼登錄要記得和的相對位置，自行在中添加引用。
介紹
除了樣式之外,只通過css的偽類選擇器實現(xiàn)了當(dāng)鼠標(biāo)焦點在"用戶名"或"密碼"輸入框時,提示信息自動縮小并跑到左上方。如若輸入框中沒有值，則回到原來的樣子，若有值則不再恢復(fù)。
其基本原理是 css3 提供的偽元素選擇器，通過在標(biāo)簽中增加require屬性（這個屬性并不是一個鍵值對），使得當(dāng)輸入框中有內(nèi)容時會被:valid選擇器選中。至于鼠標(biāo)焦點還在輸入框中時利用的偽類選擇器:focus算是老生常談了。
但說明輸入框內(nèi)容的標(biāo)簽并不是標(biāo)簽的子元素，該如何通過的狀態(tài)管理呢？便用到了兄弟選擇器~。eleA ~ eleB作為選擇器時，會選中所有和 eleA 同輩的 eleB 元素。官方文檔點此：傳送門。
另外最后被密碼輸入框的瀏覽器自動提示曾經(jīng)的內(nèi)容搞得煩的一批，搜索了一下可以通過在標(biāo)簽中添加autocomplete="off"禁止瀏覽器做輸入框提示，完美。
代碼index.html
Document
簡單登錄框
index.css
要記得和index.html的相對位置，自行在index.html中添加引用。
* {
padding: 0;
margin: 0;
}
body {
background: linear-gradient(127deg, #64c4ed, #fec771);
height: 100vh;
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
"Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
}
#login-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
padding: 3vh 3vw;
background-color: #8b4367;
opacity: .8;
outline: none;
border: none;
border-radius: 10px;
box-shadow: 2px 2px 6px #8b4367;
}
#login-div #form-title-p {
font-weight: 500;
font-size: 2rem;
padding: 10px;
margin-bottom: 20px;
letter-spacing: 0.5rem;
}
.input-div {
position: relative;
padding: 5px;
margin-bottom: 2vh;
}
.input-div,
.btn-div {
text-align: center;
vertical-align: middle;
}
.input-div input {
width: 15vw;
height: 5vh;
padding: 0 1rem;
outline: none;
border: none;
background-color: transparent;
border-bottom: 1px solid black;
font-size: 14px;
}
.input-div label {
position: absolute;
left: 1rem;
top: .5rem;
font-size: 16px;
transition: 0.2s;
}
.input-div input:focus ~ label,
.input-div input:valid ~ label {
left: 0;
top: -10px;
font-size: 12px;
}
.btn-div button {
outline: none;
border: none;
margin-top: 3vh;
width: 90%;
box-sizing: border-box;
padding: 10px;
border-radius: 8px;
box-shadow: 1px 1px 1px #32dbc6;
background-color: #49beb7;
color: white;
font-size: 16px;
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116274.html
摘要：葡萄城于年在中國設(shè)立研發(fā)中心，在全球化產(chǎn)品的研發(fā)過程中，不斷適應(yīng)中國市場的本地需求，并為軟件企業(yè)和各行業(yè)的信息化提供優(yōu)秀的軟件工具和咨詢服務(wù)。 ? 因為項目的原因，前段時間研究并使用了 SoapUI 測試工具進行自測開發(fā)的 api。下面將研究的成果展示給大家，希望對需要的人有所幫助。 SoapUI 是什么？ SoapUI 是一個開源測試工具，通過 soap/http 來檢查、調(diào)用、實現(xiàn)...
摘要：但是，畢竟是人，哪天忙了就會忘記提交，所以想著能不能實現(xiàn)在自己阿里云服務(wù)器系統(tǒng)上，設(shè)置，定制下命令，實現(xiàn)每天定點自動提交。 前言 進入自己github主頁會看到自己的提交記錄，如果某天沒有提交記錄，那天的小方框就顯示灰色。強迫癥的我，每次進來看著就感覺不爽，想著自己每天記得提交點東西，爭取像阮一峰大神一樣，每天都有提交記錄。 showImg(https://www.wty90.co...
摘要：常見登錄框很多情況下，網(wǎng)站的登錄框，就像這樣這樣這樣或者這樣錘子科技總之，登錄面板位于頁面正中央，水平居中，豎直居中。并且隨著瀏覽器窗口大小變化，始終居中方法一實現(xiàn)思路使用兩個嵌套，外層的寬高設(shè)置為瀏覽器視窗大小，相對定位。 常見登錄框 很多情況下，網(wǎng)站的登錄框，就像這樣 showImg(https://segmentfault.com/img/remote/1460000008644...
摘要：常見登錄框很多情況下，網(wǎng)站的登錄框，就像這樣這樣這樣或者這樣錘子科技總之，登錄面板位于頁面正中央，水平居中，豎直居中。并且隨著瀏覽器窗口大小變化，始終居中方法一實現(xiàn)思路使用兩個嵌套，外層的寬高設(shè)置為瀏覽器視窗大小，相對定位。 常見登錄框 很多情況下，網(wǎng)站的登錄框，就像這樣 showImg(https://segmentfault.com/img/remote/1460000008644...
閱讀 1396·2023-04-25 18:34
閱讀 3457·2021-11-19 09:40
閱讀 2836·2021-11-17 09:33
閱讀 2949·2021-11-12 10:36
閱讀 2837·2021-09-26 09:55
閱讀 2663·2021-08-05 10:03
閱讀 2527·2019-08-30 15:54
閱讀 2873·2019-08-30 15:54
