銀行卡號及驗(yàn)證碼是我們在日常生活中常常接觸到的東西，它們也需要在網(wǎng)頁上進(jìn)行輸入驗(yàn)證。在CSS中，我們可以通過一些樣式來方便地進(jìn)行銀行卡號和驗(yàn)證碼的輸入及驗(yàn)證。

.card-input {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.card-input input {
height: 30px;
width: 240px;
border: 1px solid #dddddd;
border-radius: 5px;
margin-right: 20px;
padding: 0 10px;
}
.card-input input:last-child {
margin-right: 0;
}
.card-input label {
font-size: 16px;
font-weight: bold;
}
.card-input input:focus {
outline: none;
border: 1px solid #0070C9;
}
.card-input .card-code {
display: flex;
align-items: center;
margin-top: 5px;
}
.card-input .card-code label {
margin-right: 10px;
}
.card-input .card-code input {
height: 30px;
width: 70px;
border: 1px solid #dddddd;
border-radius: 5px;
margin-right: 20px;
padding: 0 10px;
}
.card-input .card-code input:focus {
outline: none;
border: 1px solid #0070C9;
}
.card-input .card-code img {
vertical-align: middle;
width: 80px;
height: 30px;
border-radius: 5px;
}

上面的代碼展現(xiàn)了一種銀行卡號及驗(yàn)證碼輸入的樣式，其中銀行卡號采用了兩個(gè)輸入框的形式，中間用了空白分隔開，驗(yàn)證碼則在輸入框后面搭配了一張圖片，方便用戶輸入。在輸入框獲得焦點(diǎn)時(shí)，我們需要給其添加一個(gè)輪廓線展示出輸入框處于活躍狀態(tài)。