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:

Input without focus

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.

Input with focus

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:

Input with focus

Input without focus

Could you please help me with this?

CodePudding user response：

You can try the below code

HTML

<div >
  <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;
}

CodePudding user response：

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 >  
    <div >
      <input type="text" name="input-text" id="input-text" required spellcheck="false">
      <span >
        Placeholder
      </span>
    </div>
  </div>

CodePudding user response：

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 >
  <div >
    <div ></div>
    <div ></div>
  </div>
  <label >test label</label>  
  <input type="text" >
</div>