I need to create an input with a border that will change when the input is focused.
The inputs should works in that way: When input is not focused and is empty, the label should be inside the input:
When user focus the input, or input is filled, the label will move up and the border should be cropped so the label is not obscured by the border.
I've tried with adding before element on label with background, but i realized this is not the correct way because input has not background itself and depend on the subpage there can be other background color and finally the resould looked like this:
Could you please help me with this?
You can try the below code
HTML
<div class="input-control">
<input type="text" required>
<label>Placeholder</label>
</div>
CSS
.input-control {
position: relative;
}
input {
display: inline-block;
border: 1px solid #ccc;
padding: 10px;
}
input:focus {
border: 1px solid red;
background-color:#fff;
}
label {
color: #999;
position: absolute;
pointer-events: none;
left: 10px;
top: 10px;
transition: 0.2s;
}
input:focus ~ label,
input:valid ~ label {
top: -8px;
left: 10px;
font-size: 12px;
color: red;
background-color:#fff;
padding:0 5px 0 5px;
}
Check out the code below. There's no way to actually crop a border, but you can construct the top border from 2 separate elements and then shrink the right element as needed - this way you don't have to worry about the flaws of the background workaround.
let field = document.querySelector('.field');
let input = document.querySelector('.input-field');
let label = document.querySelector('.label');
let border = document.querySelector('.shrink');
input.addEventListener("click", () => {
let displacement = label.offsetWidth + 14;
// get label width, plus hardcoded gap which should ideally be computed (the initial 10px gap + 4px to give the label some space)
field.classList.add('active');
border.style.width = 'calc(100% - ' + displacement + 'px)';
})body {
background: URL('https://www.toptal.com/designers/subtlepatterns/uploads/just-waves.png')
}
* {
font-family: sans-serif;
}
.field {
position: relative;
width: auto;
display: inline-block;
}
input {
border: none;
padding: 12px;
border-radius: 10px;
background: transparent;
outline: none;
border: 2px solid #000;
border-top: none;
position: relative;
}
.b1 {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 8px;
border-radius: 10px 0 0 0;
border-top: 2px solid #000;
}
.b2 {
content: '';
position: absolute;
top: 0;
right: 0;
width: calc(100% - 10px); /* subtract 10px to account for left corner border */
height: 8px;
border-radius: 0 10px 0 0;
border-top: 2px solid #000;
}
label {
position: absolute;
top: 12px;
left: 12px;
transition: all ease-in-out .1s;
}
.field.active label {
transform: translateY(-20px);
}<div class="field">
<div class="top-border">
<div class="b1"></div>
<div class="b2 shrink"></div>
</div>
<label class="label">test label</label>
<input type="text" class="input-field">
</div>You can go with this approach
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-size: 62.5%;
background: #FFF;
}
div.centralize {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
div.input-block {
position: relative;
}
div.input-block input {
font-weight: 500;
font-size: 1.6rem;
color: #495055;
width: 350px;
padding: 15px 15px;
border-radius: 1rem;
border: 2px solid #D9D9D9;
outline:none;
}
div.input-block span.placeholder {
position: absolute;
margin: 17px 0;
padding: 0 4px;
font-family: Roboto, sans-serif;
color: #6c757d;
display: flex;
align-items: center;
font-size: 1.6rem;
top: 0;
left: 17px;
transition: all 0.2s;
transform-origin: 0% 0%;
background: none;
pointer-events: none;
}
div.input-block input:valid + span.placeholder,
div.input-block input:focus + span.placeholder {
transform: scale(0.8) translateY(-30px);
background: #fff;
}
div.input-block input:focus{
color: #284B63;
border-color: #284B63;
}
div.input-block input:focus + span.placeholder {
color: #284B63;
} <div class="centralize">
<div class="input-block">
<input type="text" name="input-text" id="input-text" required spellcheck="false">
<span class="placeholder">
Placeholder
</span>
</div>
</div>