Login Form With Clear Input Fields on Click Using HTML CSS and Javascript

HTML

<head>
  <title>Clear Form Inputs Field on Click Using HTML CSS and Javascript</title>
</head>

</body>

</html>

CSS

* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

body {
      display: flex;
      justify-content: center;
      align-items: center;
    }

section {
      width: 100%;
      display: flex;
      justify-content: center;
    }

.heading {
      font-size: 24px;
      font-weight: 700;
      color: #333;
    }

.form-main-div {
      background: #fdfffd;
      border: 1px solid #c300ff;
      box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.03);
      border-radius: 8px;
      padding: 60px;
      text-align: center;
      margin-top: 30px;
      width: 640px;
    }

.form-inner-div {
      position: relative;
      width: 100%;
    }

.input-div {
      position: relative;
      max-width: 370px;
      margin: 0 auto;
      margin-top: 1rem;
    }

.input-div input {
      width: 100%;
      border: 1px solid #0044ff;
      border-radius: 50px;
      height: 50px;
      padding: 0 1.5rem 0 3.5rem;
      font-size: 18px;
      color: #333333;
    }

.input-div input:focus {
      outline: none;
      box-shadow: none;
    }

.input-div input::placeholder {
      font-size: 18px;
      color: #B0B0B0;
    }

.input-div .auth-left-icon {
      position: absolute;
      left: 0;
      top: 0;
      width: 50px;
      height: 50px;
      background: #0044ff;
      border: 1px solid #0044ff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

.clearInputIcon {
      position: absolute;
      top: 50%;
      right: 15px;
      transform: translateY(-50%);
      cursor: pointer;
    }

.form-inner-div .submitButton {
      width: 250px;
      height: 50px;
      background: #00d17a;
      border-radius: 8px;
      font-weight: 600;
      font-size: 20px;
      text-align: center;
      color: #FFFFFF;
      margin-top: 25px;
      border: 1.5px solid #00d17a;
      cursor: pointer;
    }

.form-inner-div .submitButton:hover {
      background: #ffffff;
      color: #00d17a;
    }

@media (max-width:672px) {
      .form-main-div {
        width: 100%;
        padding: 25px;
      }
    }

Ui Code Snippets

Login Form With Clear Input Fields on Click Using HTML CSS and Javascript

HTML

CSS

JS

Output

Network Marketing

SEO Course

Our Courses

Our Tutorials

Ui Code Snippets

Popular Notes

Ui Code Snippets

Login Form With Clear Input Fields on Click Using HTML CSS and Javascript

HTML

CSS

JS

Output

Network Marketing

SEO Course