HTML Input Text Boxes For Email and Password

Written by @kerixa 4 April 2021

In advanced websites, instead of using plain text boxes, text boxes with different styles are used to make them more attractive. The following code provides two boxes of input text, one used to enter email and the other to enter password. In both of these text boxes the background of the box is light blue and the string inside it is also blue. In addition, the title of each text box is trapezoidal which makes the appearance of this text box different.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --e_blue: #16569a;
    --e_light: #FAFAFA;
}

.my-wrap {
    font-family: 'Poppins', sans-serif;
}

.custom-form {
    position: relative;
    margin-bottom: 1rem;
}

.custom-form > .custom-form-label > label {
    position: relative;
    padding: 0.2rem 1.5rem;
    text-align: center;
    font-size: 60%;
    margin-bottom: 0;
}

.custom-form > .custom-form-label > label {
    color: #fff;
    background: var(--e_blue);
}

.custom-form > .custom-form-label > label::before {
    top: 4px;
    left: -12px;
    border-radius: 6px 0 0 0;
    transform: rotate(35deg);
    background: linear-gradient(145deg, var(--e_blue) 56%, #ffffff00 50%);
}

.custom-form > .custom-form-label > label::before {
    background: linear-gradient(145deg, var(--e_blue) 56%, #ffffff00 50%);
}

.custom-form > .custom-form-label > label::before, .custom-form > .custom-form-label > label::after {
    position: absolute;
    content: '';
    display: block;
    width: 31px;
    height: 31px;
}

.custom-form > .custom-form-label > label::after {
    top: 4px;
    right: -12px;
    border-radius: 0 6px 0 0;
    transform: rotate(-35deg);
    background: linear-gradient(215deg, #fff 56%, #ffffff00 50%);
}

.custom-form > .custom-form-label > label::after {
    background: linear-gradient(215deg, var(--e_blue) 56%, #ffffff00 50%);
}

.custom-form-panel {
    height: 90%;
}

.custom-form > .custom-form-control {
    padding: .6rem 1rem;
    border-radius: 7px;
    min-width: 295px;
    text-align: center;
}

.custom-form > .custom-form-control {
    border: solid 2px var(--e_blue);
    color: var(--e_blue);
    background: #FAFAFA;
}

*:focus {
    outline: none;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
<div class="text-center my-wrap pt-5 pb-5">
  <h1 class="h3 mb-3 font-weight-bold text-uppercase" style="color: var(--e_blue)">Custom Input Textbox</h1>
  <div class="custom-form">
    <div class="custom-form-label">
        <label for="userid">Email Address</label>
    </div>
    <input type="text" name="userid" class="custom-form-control" placeholder="" required="">
  </div>
  <div class="custom-form">
    <div class="custom-form-label">
        <label for="password">Password</label>
    </div>
    <input type="password" name="password" class="custom-form-control" placeholder="" required="">
  </div>
</div><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300