इनपुट टैग

1426 cleanapp42

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

21 July 2025

SVG आइकन के साथ फ़ाइल अपलोड इनपुट

10 August 2024

एनिमेटेड HTML और CSS इनपुट

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    padding: 0;
    margin: 0;
    font-family: "poppins", sans-serif;
    box-sizing: border-box;
    font-weight: 500;
}

body {
    min-height: 100svh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-container {
    position: relative;
    max-width: 350px;
    width: 100%;
    height: 45px;
}

input {
    width: 100%;
    height: 100%;
    outline: none;
    border-radius: .3rem;
    border: 1.5pt solid #ccc;
    padding-left: 16px;
    font-size: 17px;
}

label {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    transition: all 0.2s ease-in-out;
    color: #aaa;
    pointer-events: none;
}

input:focus+label,
input:valid+label {
    left: 14px;
    font-size: 15px;
    top: 0;
    color: #111;
    line-height: 1;
    background-color: #fff;
    padding-inline: 5px;
    font-weight: 600;
}

input:focus,
input:valid {
    border-color: #111;
}

इनपुट टैग

अनुशंसित

SVG आइकन के साथ फ़ाइल अपलोड इनपुट

सरल इनपुट फ़ील्ड

एनिमेटेड HTML और CSS इनपुट

HTML

CSS

JS

अनुशंसित

SVG आइकन के साथ फ़ाइल अपलोड इनपुट

सरल इनपुट फ़ील्ड

एनिमेटेड HTML और CSS इनपुट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS