It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Written by 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.
<!-- this script is provided by http://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='http://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!