[點晴永久免費OA]input輸入框添加內部圖標
當前位置：點晴教程→點晴OA辦公管理信息系統
→『 經驗分享&問題答疑 』
有可能在制作網頁的過程中遇到各種美化表單設計，這次我們來試著做一個demo，將input輸入框添加內部圖標。 話不多說，看一下最終效果： 我們的思路是，在一個div中，加入一個div和一個input標簽，小div在左側，input放右側，用box-sizing:border-box，這句代碼代表的是這個：怪異盒子模型 => 盒子定長定寬，不管有沒有padding，border，margin，始終就是這么大，影響的只會是里面的元素。 左側的div給border，也要給border-radius，右邊的input只給右邊的border，不給border-radius，input里面padding-left最好設置一下，更加美觀。 總體思路其實是把大的div做成讓人感覺像是一個input，如果能做到，那么你就成功了。 下面附代碼： <div class="student-name-box"> <div> <img src="./img/學號.png" /> </div> <input type="text" value="" placeholder="請輸入學號" /> </div> <div class="student-id-box"> <div> <img src="./img/密碼.png" /> </div> <input type="password" placeholder="請輸入密碼" /> </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 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
