What is the best way to eliminate the bottom border of an input field?

Seeking advice on how to eliminate the border-bottom of an input field when typing starts.

.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">

javascriptjqueryhtmlcss

Answer №1

Your margin-bottom style is not defined in the input.

The input appears "tall" due to a font size of 14px and an input height of 35px.

To adjust, consider reducing the height, adding padding, and incorporating 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">

You can also add a required attribute to the input for a pure CSS solution:

.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">

Answer №2

Not sure if you're referring to padding or margin. Let me provide 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>

Links from MDN for both properties:

margin-bottom

padding-bottom

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Escape a "for" loop from within a callback function in Node.js

My objective with the code snippet below is to exit FOR LOOP B and continue with FOR LOOP A by utilizing a callback function. for(var a of arrA) { // ... // ... for(var b of arrB) { // ... // ... PartService.getPart(a ...

javascriptnode.jsreturnbreakasynccallback

Resizing SVG to specify width in pixels and automatically adjust height

I'm having trouble understanding how SVG works. Can someone explain where my mistake is? Here's an example of my inline SVG code: <div style="width:1000px; height:auto; background-color:blue;"> <svg class="_image"><use xlink ...

htmlcsssvggraphics

Exploring the integration of data from two Firestore collections using JavaScript

I manage two different types of collections, one being called CURRENCY-PAIR and the other Alerts. The collection CURRENCY-PAIR includes the following information: Currency-Pair Name Currency-AskPrice Currency-BidPrice On the other hand, the Alerts colle ...

javascriptreactjsfirebasereact-nativegoogle-cloud-firestore

What is the most effective method to retrieve the UserName using Javascript?

Can someone please explain to me the difference between using session["user"].name and session["user:name"]? // I don't understand why we have to put the user session into the JavaScript global space :( var session = { user: { "Id":"d675c ...

javascriptjson

The error "req.user is not defined" occurs when accessing it from an Android

I am currently collaborating with an Android developer to create an android app. While my colleague handles the front-end development, I focus on the backend work. Specifically, I have implemented the login and authentication features using node.js, expres ...

javascriptandroidnode.jsexpresspassport.js

Converting JSON data into an array of JavaScript objects

Here is some of the JSON data I have: [ { "items": [ { "retailername": "Zop Now", "value": 475 }, { "retailername": "Snap Deal", "value": 265 ...

javascriptjqueryjson

Separate the label and content sections in an Angular Material vertical stepper

After applying the following CSS: mat-step-header{ display: flex ; justify-content: flex-end ; } I am attempting to make this stepper function properly. I have implemented Angular Material design for a vertical stepper. How can I position the steppe ...

cssangularangular-material

Creating a condensed version of the process: Utilizing jQuery for thumbnail preview on hover to create an image slideshow

I've created a video preview slideshow function using jQuery. As a newcomer to jQuery, I'm questioning if there's a more efficient way to achieve this. Having separate timers for each frame feels cumbersome and limits the flexibility in chan ...

javascriptjquery

Is there a way to retrieve JSON data using Vue and Axios?

I'm facing an issue trying to retrieve product data from a JSON file. Despite attempting different methods and searching for solutions online, I have not been able to find one that fits my specific scenario. As I am new to both Vue and axios, I apprec ...

javascriptvue.jsaxios

In my PHP script, I'm seeking a solution to include a numeric value and then

Greetings, I'm experiencing a peculiar issue where only the first section appears when I submit a number. Here is the code I've implemented and I would greatly appreciate any assistance or guidance. Essentially, my intention is to have a user red ...

phphtmlcssweb

Tips for sending multiple values in a data object using jQuery AJAX

I am currently working on a form that contains two input fields, with the possibility of more being added later. The first input is a text field and the second is a checkbox. I want to be able to send these inputs using $.ajax. To accomplish this, I have ...

javascriptjqueryhtmlajax

Unleashing the power of scroll-based dynamic pagination in ReactJS

I have 33 entries in a json format. I've implemented a code that tracks the scroll on my page and loads new 10 entries at a time. Everything works smoothly when the scroll value is set to equal or less than zero. When the scroll reaches the bottom of ...

javascriptreactjs

Change the background color according to the user's input text

I want to create a text box where users can input color keywords like blue, lime, or black. When they click submit, I want the background color of the page to change accordingly. This is what I have so far: <label for="color">Color: </label> ...

javascripthtmlcss

Retrieve the value of the option that has been selected

I've been searching tirelessly, but I just can't seem to find the answer online or figure out the correct code on my own. Although I did manage to make it work with jQuery, I need to switch over to using YUI 2.7. So, what exactly am I trying to ...

jqueryformsyui

Having trouble importing the named export `{module}` from a non-ECMAScript module with TipTap and Nuxt?

I'm using TipTap with Nuxt and running into some issues that I can't seem to resolve. Despite following suggestions from the repository's issues, I keep encountering these specific errors: ERROR in /Volumes/Projects/nuxt/candy-hub-lerna/no ...

javascriptvue.jsvue-componentnuxt.js

FlexBox responsive items that are expandable getting cut off

I am currently working on creating a row of expandable items. While I have almost achieved the desired behavior, there are a few issues that I need help with: On Desktop, the items are cut off and not fully visible. On Mobile, half of the items are missin ...

htmlcssreactjsflexboxtailwind-css

Placing elements from an array into a customized output

Currently, I am dealing with a unique output: dAmn_Raw('send chat:Sandbox\n\nmsg main\n\nthismessage'); In my code, there exists a variable: myvariable that stores a random value selected from an array I formulated. The cha ...

javascriptarrays

Utilize the power of Wikitude within an Angular 2 application

I am currently working on integrating Wikitude Architect View in Angular 2 by referring to the code at this link. My goal is to implement this code in an Angular 2 compatible way. import * as app from 'application'; import * as platform from & ...

javascriptangularjsangulartypescriptwikitude

Angularjs - Transferring the $scope object to a controller

While taking Angular's complimentary online course, I came across the following code snippet: app.controller('GalleryController', function(){ this.current = 0; this.setCurrent = function(imageNumber){ this.current = imageNumber || 0 ...

javascriptangularjscontroller

Vue Material - Effortlessly integrate native transitions within router views

In the project I'm currently working on, I have chosen to use Vue Material for the development of a single-page application. The approach I am taking follows a common trend in which a central "container" component is utilized to manage the shifting vi ...

javascriptvue.jsvuejs2vue-routervue-material