How do I remove border bottom of input field?

Question

Can anyone tell me how do I remove border-bottom of the input field when I start writing?

.car-list-input {
  font-family: 'Source Sans Pro', sans-serif;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 400 !important;
  height: 35px;
  position: relative;
  border-left: 2px solid #e0e6e8;
  border-right: 2px solid #e0e6e8;
  border-top: 2px solid #e0e6e8;
  border-bottom: 0px;
}

.car-list-input:focus {
  border-color: #25c16f;
  outline: 0;
  box-shadow: none;
  border-bottom: 0px;
}

<input type="text" placeholder="Enter the location of your vehicle" id="location" onchange="locationApproved()" autocomplete="off" class="form-control car-list-input">

You could do this wil an event handler on the input, that checks the value length to know what to do. What have you tried? — Taplar, May 29 '19 at 16:55
The problem is I want to keep border bottom by default and only remove when I start typing something. — BillNathan, May 29 '19 at 17:25
You can do it with javascript as first answer (with small changes) or via css if you're ok to use `required`: https://stackoverflow.com/a/16956610/2181514 - if you don't want pure css/required, there's another answer to the same question: https://stackoverflow.com/a/23502490/2181514 — freedomn-m, May 29 '19 at 17:28

Ann MB · Accepted Answer · 2019-05-29T18:02:31.883

You didn't defined any margin-bottom style.

The input looks "tall" because your font size is 14px and the input height is 35px.

So maybe, just low the height, put some padding and add an event listener.

document.getElementById("location").addEventListener("keyup", function(){
  if (this.value != '') {
    this.style.borderBottomWidth = "0px"
  } else {
    this.style.borderBottomWidth = "2px" 
  }
},false)

.car-list-input {
  font-family: 'Source Sans Pro', sans-serif;
  border: 2px solid #e0e6e8;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 400 !important;
  height: 35px;
  position: relative;
}

.car-list-input:focus {
  border-color: #25c16f;
  outline: 0;
  box-shadow: none;
  border-bottom: solid 2px #25c16f;
}

<input type="text" placeholder="Enter the location of your vehicle" id="location" onchange="locationApproved()" autocomplete="off" class="form-control car-list-input">

Also, pure CSS proposition, add a required attribute to input and check the new CSS :

.car-list-input {
  font-family: 'Source Sans Pro', sans-serif;
  border-style: solid;
  border-color: #e0e6e8;
  border-width: 2px 2px 0 2px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 400 !important;
  height: 35px;
  position: relative;
}

.car-list-input:focus {
  border-color: #25c16f;
  outline: 0;
  box-shadow: none;
  border-color: #25c16f;
}

.car-list-input:invalid {
  border-width:2px;
}

<input type="text" required placeholder="Enter the location of your vehicle" id="location" onchange="locationApproved()" autocomplete="off" class="form-control car-list-input">

I'm looking into completely removing the margin. Something like the code I've updated to but on the start of writing only. — BillNathan, May 29 '19 at 17:11
I'm extremely sorry. I mean border-bottom. Please check my edited code — BillNathan, May 29 '19 at 17:19
I understand. I accepted my fault. I just wrote the wrong word. Please accept my apologies. I have been able to achieve to remove border-bottom using CSS, but I want to achieve it when I start typing in the input field — BillNathan, May 29 '19 at 17:22

score 0 · Answer 2 · answered May 29 '19 at 17:22

I'm not sure if you mean padding or margin. Here are two examples:

margin-bottom:

https://jsfiddle.net/q049negk/

.car-list-input {
  font-family: 'Source Sans Pro', sans-serif;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 400 !important;
  height: 35px;
  position: relative;
  border-left: 2px solid #e0e6e8;
  border-right: 2px solid #e0e6e8;
  border-top: 2px solid #e0e6e8;
  border-bottom: 0px;
  margin-bottom: 50px;
}

.car-list-input:focus {
  border-color: #25c16f;
  outline: 0;
  box-shadow: none;
  border-bottom: solid 2px #25c16f;
  margin-bottom: 0px;
}

.square {
  height: 60px;
  width: 60px;
  background: red;
  margin: 0;
  padding: 0;
}

<input type="text" placeholder="Enter the location of your vehicle" id="location" onchange="locationApproved()" autocomplete="off" class="form-control car-list-input">
<div class="square">
</div>

padding-bottom:

https://jsfiddle.net/q049negk/1/

.car-list-input {
  font-family: 'Source Sans Pro', sans-serif;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 400 !important;
  height: 35px;
  position: relative;
  border-left: 2px solid #e0e6e8;
  border-right: 2px solid #e0e6e8;
  border-top: 2px solid #e0e6e8;
  border-bottom: 0px;
  padding-bottom: 50px;
}

.car-list-input:focus {
  border-color: #25c16f;
  outline: 0;
  box-shadow: none;
  border-bottom: solid 2px #25c16f;
  padding-bottom: 0px;
}

.square {
  height: 60px;
  width: 60px;
  background: red;
  margin: 0;
  padding: 0;
}

<input type="text" placeholder="Enter the location of your vehicle" id="location" onchange="locationApproved()" autocomplete="off" class="form-control car-list-input">
<div class="square">
</div>

Here are MDN links for both:

margin-bottom

padding-bottom

How do I remove border bottom of input field?

2 Answers2