mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
50 lines
1.4 KiB
HTML
50 lines
1.4 KiB
HTML
<div class="InputContainer">
|
|
<input placeholder="0000 0000 0000 0000" id="input" class="input" name="text" type="text">
|
|
<div class="visaCard">
|
|
<svg viewBox="0 0 48 48" height="23" width="23" y="0px" x="0px" xmlns="http://www.w3.org/2000/svg" class="logo">
|
|
<path d="M32 10A14 14 0 1 0 32 38A14 14 0 1 0 32 10Z" fill="#ff9800"></path><path d="M16 10A14 14 0 1 0 16 38A14 14 0 1 0 16 10Z" fill="#d50000"></path><path d="M18,24c0,4.755,2.376,8.95,6,11.48c3.624-2.53,6-6.725,6-11.48s-2.376-8.95-6-11.48 C20.376,15.05,18,19.245,18,24z" fill="#ff3d00"></path>
|
|
</svg>
|
|
</div>
|
|
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by vinodjangid07 - Tags: input, creditcard, card number */
|
|
.InputContainer {
|
|
height: 35px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: rgb(8, 8, 8);
|
|
overflow: hidden;
|
|
padding: 0px 5px 0px 15px;
|
|
border: 1px solid rgba(255, 255, 255, 0.322);
|
|
border-radius: 10px;
|
|
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);
|
|
}
|
|
|
|
.input {
|
|
width: 170px;
|
|
height: 100%;
|
|
border: none;
|
|
outline: none;
|
|
font-size: 0.9em;
|
|
caret-color: rgb(255, 81, 0);
|
|
background-color: rgb(8, 8, 8);
|
|
font-weight: 600;
|
|
color: white;
|
|
}
|
|
|
|
.visaCard {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
width: 40px;
|
|
height: 25px;
|
|
background-color: rgb(8, 8, 8);
|
|
pointer-events: none;
|
|
border: 1px solid rgba(255, 255, 255, 0.068);
|
|
border-radius: 7px;
|
|
}
|
|
|
|
</style>
|