,,

[點晴永久免費OA]input輸入框添加內部圖標

admin

2023年5月17日 19:7 本文熱度 1537

有可能在制作網頁的過程中遇到各種美化表單設計，這次我們來試著做一個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 編輯過

關鍵字查詢

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。

日本xxxx18视频在线观看-日本xxxx1819-日本xxxwww在线观看-日本xxx-日本xx-日本www在线视频

[點晴永久免費OA]input輸入框添加內部圖標