Input same width as placeholder

Input same width as placeholder

by Timar

HTML

<p>________rebuilt_______</p>
<div class="rebuilt">
  <span class="input-container">
  <span class="space-keeper">
  palabra
  </span>
  <input type="text">
</span>
</div>



<p>__________copy_________pasta</p>

<span class="input-container"><span class="background"><span index="0" class="hidden">n</span><span index="1" class="hidden">i</span><span index="2" class="hidden">v</span><span index="3" class="hidden">e</span><span index="4" class="hidden">l</span><span index="5" class="hidden">e</span><span index="6" class="hidden">s</span></span><input class="answer-input" type="text" data-idx="4" maxlength="50" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></span>

SCSS

input, span {
  font-size: 16px;
  font-family: serif;
}
input {
  background: #ff000005;
}

div.rebuilt {
  .input-container {
    position: relative;
    input {
      //display: inline;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      color: #338c99;
      margin: 0;
      background: #00000000;
      border: 0;
      outline: none;
      padding: 0;
    }
    .space-keeper {
      opacity: 0.5;
    }
}
  
}

.input-container {
    display: inline-block;
    position: relative;
    padding: 0;
    margin: .25rem 0;
}
.background {
  background: #e0ebef;
    margin: 0;
    border-radius: 2px;
    padding: .25rem .25em;
    user-select: none;
}
.answer-input {
background: transparent;
    border: 0 none;
    outline: none;
    display: block;
    font: inherit;
    margin: 0;
    padding: 0;
    resize: none;
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    border-radius: 0;
    -webkit-border-radius: 0;
  
  
    display: inline;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    color: #338c99;
    margin: 0;
    padding: 0 .25em;
    
}