mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
79 lines
4.8 KiB
HTML
79 lines
4.8 KiB
HTML
<label class="password-label">
|
|
<input placeholder="Enter this 123456Qw" required="" pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)[A-Za-z\d]{8,}$" class="input" type="password">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" height="20" width="20" class="close">
|
|
<g clip-path="url(#clip0_4_24)">
|
|
<path fill="#4EF54B" d="M17.1354 10.3645C16.8922 10.1214 16.5972 10 16.2498 10H6.66659V5.83341C6.66659 4.91312 6.99217 4.12763 7.64325 3.47655C8.29438 2.82561 9.07991 2.50007 10.0001 2.50007C10.9202 2.50007 11.7059 2.82556 12.3567 3.47655C13.0079 4.12763 13.3335 4.91316 13.3335 5.83341C13.3335 6.05903 13.4159 6.25431 13.5806 6.41923C13.7458 6.58419 13.9412 6.66669 14.1665 6.66669H15.0003C15.2258 6.66669 15.4211 6.58419 15.5862 6.41923C15.7507 6.25431 15.8334 6.05903 15.8334 5.83341C15.8334 4.22733 15.2627 2.85389 14.1213 1.71231C12.9798 0.570683 11.606 7.62939e-06 10.0001 7.62939e-06C8.39412 7.62939e-06 7.02045 0.570683 5.87883 1.71226C4.73738 2.8537 4.16666 4.22728 4.16666 5.83337V9.99999H3.75005C3.40293 9.99999 3.10772 10.1216 2.86464 10.3645C2.62156 10.6073 2.50006 10.9026 2.50006 11.2499V18.75C2.50006 19.0974 2.6216 19.3925 2.86464 19.6355C3.10772 19.8784 3.40293 20 3.75005 20H16.2498C16.5972 20 16.8925 19.8784 17.1354 19.6355C17.3782 19.3925 17.4999 19.0974 17.4999 18.75V11.2499C17.5001 10.9027 17.3785 10.6077 17.1354 10.3645Z"></path>
|
|
<path fill="#4EF54B" d="M2.86464 10.3645C3.10777 10.1214 3.4028 10 3.75019 10H13.3334V5.83341C13.3334 4.91312 13.0078 4.12763 12.3567 3.47655C11.7056 2.82561 10.9201 2.50007 9.99989 2.50007C9.07978 2.50007 8.29411 2.82556 7.64326 3.47655C6.99213 4.12763 6.66655 4.91316 6.66655 5.83341C6.66655 6.05903 6.58413 6.25431 6.41936 6.41923C6.25422 6.58419 6.05884 6.66669 5.83345 6.66669H4.99972C4.77419 6.66669 4.5789 6.58419 4.41376 6.41923C4.24931 6.25431 4.16657 6.05903 4.16657 5.83341C4.16657 4.22733 4.73734 2.85389 5.87869 1.71231C7.02023 0.570683 8.39403 7.62939e-06 9.99989 7.62939e-06C11.6059 7.62939e-06 12.9795 0.570683 14.1212 1.71226C15.2626 2.8537 15.8333 4.22728 15.8333 5.83337V9.99999H16.25C16.5971 9.99999 16.8923 10.1216 17.1354 10.3645C17.3784 10.6073 17.4999 10.9026 17.4999 11.2499V18.75C17.4999 19.0974 17.3784 19.3925 17.1354 19.6355C16.8923 19.8784 16.5971 20 16.25 20H3.75019C3.4028 20 3.1075 19.8784 2.86464 19.6355C2.62179 19.3925 2.50006 19.0974 2.50006 18.75V11.2499C2.49988 10.9027 2.62147 10.6077 2.86464 10.3645Z"></path>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_4_24">
|
|
<rect fill="white" height="20" width="20"></rect>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" height="20" width="20" class="open">
|
|
<g clip-path="url(#clip0_4_24)">
|
|
<path fill="currentColor" d="M17.1354 10.3645C16.8922 10.1214 16.5972 10 16.2498 10H6.66659V5.83341C6.66659 4.91312 6.99217 4.12763 7.64325 3.47655C8.29438 2.82561 9.07991 2.50007 10.0001 2.50007C10.9202 2.50007 11.7059 2.82556 12.3567 3.47655C13.0079 4.12763 13.3335 4.91316 13.3335 5.83341C13.3335 6.05903 13.4159 6.25431 13.5806 6.41923C13.7458 6.58419 13.9412 6.66669 14.1665 6.66669H15.0003C15.2258 6.66669 15.4211 6.58419 15.5862 6.41923C15.7507 6.25431 15.8334 6.05903 15.8334 5.83341C15.8334 4.22733 15.2627 2.85389 14.1213 1.71231C12.9798 0.570683 11.606 7.62939e-06 10.0001 7.62939e-06C8.39412 7.62939e-06 7.02045 0.570683 5.87883 1.71226C4.73738 2.8537 4.16666 4.22728 4.16666 5.83337V9.99999H3.75005C3.40293 9.99999 3.10772 10.1216 2.86464 10.3645C2.62156 10.6073 2.50006 10.9026 2.50006 11.2499V18.75C2.50006 19.0974 2.6216 19.3925 2.86464 19.6355C3.10772 19.8784 3.40293 20 3.75005 20H16.2498C16.5972 20 16.8925 19.8784 17.1354 19.6355C17.3782 19.3925 17.4999 19.0974 17.4999 18.75V11.2499C17.5001 10.9027 17.3785 10.6077 17.1354 10.3645Z"></path>
|
|
</g>
|
|
<defs>
|
|
<clipPath>
|
|
<rect fill="currentColor" height="20" width="20"></rect>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</label>
|
|
<style>
|
|
/* From Uiverse.io by Galahhad - Tags: input */
|
|
.password-label {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.password-label svg {
|
|
width: 15px;
|
|
height: auto;
|
|
color: #7c7c7c;
|
|
}
|
|
|
|
.password-label input {
|
|
width: 100%;
|
|
outline: none;
|
|
background: none;
|
|
border: 1px solid transparent;
|
|
color: #8b8b8b;
|
|
background: #3D3D3D;
|
|
border-radius: 12px;
|
|
padding: 9px 30px 9px 9px;
|
|
transition: .2s;
|
|
}
|
|
|
|
.password-label input:hover,
|
|
.password-label input:focus {
|
|
border-color: #868686;
|
|
}
|
|
|
|
.password-label input:valid {
|
|
background: #344b3a;
|
|
border: 1px solid #00FF29;
|
|
color: #00FF29;
|
|
}
|
|
|
|
.password-label input:valid~.open {
|
|
display: none;
|
|
}
|
|
|
|
.password-label input:valid~.close {
|
|
display: block;
|
|
}
|
|
|
|
.password-label svg {
|
|
position: absolute;
|
|
right: 9px;
|
|
}
|
|
|
|
.close {
|
|
display: none;
|
|
}
|
|
</style>
|