How to make type area underlined not box in HTML

Question

            <form  action="add.jsp" method="post">
            <div class="form-group">
            <label>Order ID</label>
            <input type="text" name="Order_ID"  class="form-control">
            <label>Order Date</label>
            <input type="text" name="Order_Date"  class="form-control">
            <label>Customer Name</label>
            <input type="text" name="Customer_Name" class="form-control">
            <label>Customer Number</label>
            <input type="text" name="Customer_ID"  class="form-control">
            <label>Order Amount</label>
            <input type="text" name="Order_Amount" class="form-control">
            <label>Notes</label>
            <input type="text" name="Notes"  class="form-control">
            
            </div>
   </form>
       

I have this type of box design for input

But I want this type of input area(Underlined)

Answer 1

Added css code in <input> changed border with border-bottom

So will like this, example:

border: 0;
outline: 0;
background: transparent;
border-bottom: 1px solid black;

Then output will like this

 input.form-control { border: 0; outline: 0; background: transparent; border-bottom: 1px solid black; }.form-group { display: grid; grid-template-columns: min-content auto; grid-gap: 10px; white-space: nowrap; }

 <form action="add.jsp" method="post"> <div class="form-group"> <label>Order ID</label> <input type="text" name="Order_ID" class="form-control"> <label>Order Date</label> <input type="text" name="Order_Date" class="form-control"> <label>Customer Name</label> <input type="text" name="Customer_Name" class="form-control"> <label>Customer Number</label> <input type="text" name="Customer_ID" class="form-control"> <label>Order Amount</label> <input type="text" name="Order_Amount" class="form-control"> <label>Notes</label> <input type="text" name="Notes" class="form-control"> </div> </form>

Answer 2

Here is one way, just need to add CSS and adjust borders.

Run the snippet to see.

 .form-group { display: grid; grid-template-columns: min-content auto; grid-gap: 15px; } label { font-size: 18px; color: #333; height: 20px; width: 150px; text-align: left; } input { margin: 8px 0; height: 20px; box-sizing: border-box; border: none; border-bottom: 2px solid blue; }

 <form action="add.jsp" method="post"> <div class="form-group"> <label>Order ID</label> <input type="text" name="Order_ID" class="form-control"> </div> <div class="form-group"> <label>Order Date</label> <input type="text" name="Order_Date" class="form-control"> </div> <div class="form-group"> <label>Customer Name</label> <input type="text" name="Customer_Name" class="form-control"> </div> <div class="form-group"> <label>Customer Number</label> <input type="text" name="Customer_ID" class="form-control"> </div> <div class="form-group"> <label>Order Amount</label> <input type="text" name="Order_Amount" class="form-control"> </div> <div class="form-group"> <label>Notes</label> <input type="text" name="Notes" class="form-control"> </div> </form>

Answer 3

You can try:

input {
  border: none;
  border-bottom: 1px solid #ccc;
}

Answer 4

You can easily do this with border-bottom property. But before that, you'll need to reset the default border first using border: none;

Follow this -

 input

 input { border: none; border-bottom: 1px solid #ccc; }

 Order: <input type="text" name="Order_ID" class="form-control">

Answer 5

for your oritantion to have the input at the right of the label you can use css-grid. will look the cleanest. For only havin a bottom broder, remoev all border of the input with border: none; and add a border at the bottom with border-bottom . Note that border-bottom has to come after border as otherwise all border will be removed.

 .form-group { display: grid; grid-template-columns: min-content auto; grid-gap: 10px; white-space: nowrap; }.form-group input { border: none; border-bottom: 1px solid grey; }

 <form action="add.jsp" method="post"> <div class="form-group"> <label>Order ID</label> <input type="text" name="Order_ID" class="form-control"> <label>Order Date</label> <input type="text" name="Order_Date" class="form-control"> <label>Customer Name</label> <input type="text" name="Customer_Name" class="form-control"> <label>Customer Number</label> <input type="text" name="Customer_ID" class="form-control"> <label>Order Amount</label> <input type="text" name="Order_Amount" class="form-control"> <label>Notes</label> <input type="text" name="Notes" class="form-control"> </div> </form>