[點(diǎn)晴永久免費(fèi)OA]input輸入框添加內(nèi)部圖標(biāo)
有可能在制作網(wǎng)頁的過程中遇到各種美化表單設(shè)計(jì)，這次我們來試著做一個(gè)demo，將input輸入框添加內(nèi)部圖標(biāo)。 話不多說，看一下最終效果： 我們的思路是，在一個(gè)div中，加入一個(gè)div和一個(gè)input標(biāo)簽，小div在左側(cè)，input放右側(cè)，用box-sizing:border-box，這句代碼代表的是這個(gè)：怪異盒子模型 => 盒子定長(zhǎng)定寬，不管有沒有padding，border，margin，始終就是這么大，影響的只會(huì)是里面的元素。 左側(cè)的div給border，也要給border-radius，右邊的input只給右邊的border，不給border-radius，input里面padding-left最好設(shè)置一下，更加美觀。 總體思路其實(shí)是把大的div做成讓人感覺像是一個(gè)input，如果能做到，那么你就成功了。 下面附代碼： <div class="student-name-box"> <div> <img src="./img/學(xué)號(hào).png" /> </div> <input type="text" value="" placeholder="請(qǐng)輸入學(xué)號(hào)" /> </div> <div class="student-id-box"> <div> <img src="./img/密碼.png" /> </div> <input type="password" placeholder="請(qǐng)輸入密碼" /> </div> CSS： .student-name-box,.student-id-box{
box-sizing: border-box;
width:300px;
height:36px;
border: 2px solid #DDD;
border-radius: 5px;
margin-top: 27px;
margin-left: 50%;
transform: translateX(-50%);
}
input{
box-sizing: border-box;
margin-bottom: 1px;
outline: none;
width:264px;
height:32px;
padding-left: 10px;
border:;
}
.student-name-box div:first-child
,.student-id-box div:first-child{
box-sizing: border-box;
float: left;
width: 32px;
height: 32px;
background: rgb(233,236,239);
background-position:8px 10px;
border-right: 2px solid #DDD;
}
.student-name-box img,.student-id-box img{
width: 16px;
height: 16px;
margin:8px;
}該文章在 2023/5/17 19:09:04 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
