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

Inventive website concept (far from ordinary, and not a plea for coding assistance)

Once again, I want to clarify that I am not asking for someone to code this idea for me. I am seeking advice from experienced web developers on whether or not my concept is achievable, as it involves some complex issues (at least in my opinion). If this po ...

phpjavascriptajaxflashnode.js

What is the method for developing a Typescript-connected High-Order React Component with Redux?

I am looking to develop a React Higher-Order Component that can safeguard routes within my application from unauthorized users without an access token. I aim to use this HOC to wrap a Component like so in the parent component: <Route exact path ...

javascriptreactjstypescriptreduxreact-router

Leveraging JavaScript along with the jQuery library and API to showcase information related to

Hey there! I have been working on this API that shows upcoming concerts, but I'm struggling to display the images associated with each concert. I've tried using for loops to iterate through the objects, and it seems like every sixth element has ...

javascriptjqueryhtmlajaxobject

What is the best way to eliminate a particular element from an array produced using the .map() function in

I am experiencing an issue with my EventCell.tsx component. When a user clicks on the component, an event is created by adding an element to the components state. Subsequently, a list of Event.tsx components is rendered using the .map() method. The problem ...

javascriptreactjsarraystypescriptvite

What is the technique for wrapping a component with a rectangle box in ReactJs?

Do you like the design in this example image? I attempted to create a similar layout using Material UI Box, but unfortunately, it only displays the text without rendering the box itself. Take a look at the code I used: import * as React from 'react& ...

javascriptreactjsmaterial-ui

What is the alternative to using this.$parent.$emit in Vue 3?

Recently, my application has been upgraded to Vue 3. Following the migration, my linter flagged a deprecation error that is documented at this link: . The documentation provides guidance on replacing this.$emit with the mitt library, however, it does not ...

javascriptvue.jsmigrationlintervuejs3

Display the Ajax response in a designated div

I am facing an issue with my ajax code. It doesn't print any output, but when I use alert() to print the output, it shows up fine. $(".grp-ans").each(function(e){ $.ajax({ type: 'POST', url: 'show-answ ...

jqueryhtmlajax

Unable to locate the reverse for 'my_views_name' without any arguments in Django. Bridging server-side code with client-side JavaScript using jQuery

How can I create a button to update a URL after fetching data from the database using jQuery AJAX? This is my code in views.py: def list_maingroup(request): lists = MainGroup.objects.all().order_by('-pk') data = [] for i in lists: ...

javascriptpythondjangoajax

"Enhance your online shopping experience with a React.js popup modal for

In the midst of developing a shopping cart, I find myself facing a challenge in making the modal pop up when clicking on the shopping cart icon. The semantic-ui documentation for modals has not provided clear instructions on achieving this functionality, s ...

javascriptreactjssemantic-uisimplemodal

Designing a webpage - patterns in the background and images layered on top

I've been tasked with creating a webpage that resembles a theatrical stage. The design calls for the following layout: [curtain repeat][left curtain][stage][right curtain][curtain repeat] The left curtain, stage, and right curtain should maintain a ...

htmlcss

updating a div without having to reload the entire webpage

This is my unique code snippet <!doctype html> <html> <head> <script language="javascript" type="text/javascript" src="jquery.js"></script> <style> *{padding:0px; margin:0px;} #output{width:850px; height:400p ...

jqueryajax

Sending file streams from the frontend to the backend service using Express.js and the Fetch

In my ExpressJS application, I have created an endpoint that needs to proxy a large raw binary to a remote backend REST service without storing anything in memory. To achieve this, I initially looked into using the request module with code like: req.pipe( ...

javascriptexpressfetch-api

"Facing an issue where jQuery autocomplete is not retrieving data from PHP source

Trying to implement autocomplete functionality in an input field while typing. Here is what I have attempted so far: jquery This code snippet is placed within $(document).ready(function(){ $(".auto").autocomplete({ source: "../ ...

phpjqueryautocomplete

Applying CSS text-shadow to an input field can cause the shadow to be truncated

I've encountered an issue when applying text-shadow to an input field, where the shadow appears to clip around the text. Here is the CSS code I used: @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900& ...

cssinput-fieldtext-shadow

Generating a fresh object derived from an existing object without saving any modifications

I am facing an issue with using an Array to store boilerplate objects that can be copied, modified, and added to another Array. The problem arises when the new Array takes ownership of the object, causing changes to persist in the original object. For exa ...

javascriptvue.js

``What is the mechanism behind callbacks in AngularJS when making a call to a REST service?

Currently, I am diving into the world of AngularJS and REST. The code snippet that I'm analyzing has the term callback repeatedly used in an authentication function. I'm curious to know if "callback" is a JavaScript or Angular keyword, or simply ...

javascriptangularjs

Show information - press the button on the current PHP page

After successfully reading files via PHP from a directory and dynamically creating a drop-down menu to view the file content, I have a query. Is there a way to display the text files' content on the same page without calling another PHP page? I know t ...

javascriptphphtmlajax

Data is not being successfully passed through Ajax

Having some issues with passing data through ajax. I've used this method multiple times before without any problems, but now it's not returning anything. Here is the javascript code: $('#contactformbtn').click(function(){ var full ...

javascriptphpajaxforms

Testing Async operations in the browser with Mocha and Chai

I'm having trouble running async tests with mocha. Below is the snippet of my code: describe('Brightcove Wrapper',function(){ describe("#init()", function() { it("Should inject the brightcove javascript", function(callback){ ...

javascriptunit-testingbddmocha.jschai

Utilizing a modal for Wordpress search queries

I recently started learning PHP and JavaScript, and I've encountered a problem that has me stumped. On my website www.test.com/page, I have a search form that sends user input to www.test.com/results like this: <form method="post" action="https:/ ...

phpjquerywordpresstwitter-bootstrap