Underline fixed in input text

Question

I'm trying to fixed the underline in all input text type, but without success.

Example:

My code:

input {
  width: 100%;
  background-color: #fcfcfc;
  border: 0;
  padding: 10px;
}

<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
  <label for="endereco">Endereço:</label>
  <input class="" id="endereco" type="text" tabindex="2" minlength="5" required>
</div>

Solution 1

Use linear-gradient as background to create a line and you can easily control its size and position like this:

input {
  width: 300px;
  background: 
      linear-gradient(#000, #000) center bottom 5px /calc(100% - 10px) 2px no-repeat;
  background-color: #fcfcfc;
  border: 1px solid;
  padding: 10px;
}

<input class="" id="endereco" type="text" tabindex="2" minlength="5" required>

Using the longhand syntax:

input {
  width: 300px;
  background-image: linear-gradient(#000, #000);
  background-position: bottom 5px center;
  background-size: calc(100% - 10px) 2px;
  background-repeat: no-repeat;
  background-color: #fcfcfc;
  border: 1px solid;
  padding: 10px;
}

<input class="" id="endereco" type="text" tabindex="2" minlength="5" required>

Solution 2

Add a border to the bottom of the input?

input {
  width: 100%;
  background-color: #fcfcfc;
  border: 0;
  border-bottom: 2px solid lightgrey;
  padding: 10px;
}

<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
  <label for="endereco">Endereço:</label>
  <input class="" id="endereco" type="text" tabindex="2" minlength="5" required>
</div>