Trying to align the text on top of the input box

Issue

I am trying to align the text on top of the input box without manually aligning it. Any pointers on how to do this?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

<div class="select-vehicle">
  <label for="exampleDataList" class="form-label">Select Plate number</label>
  <input class="select-vehicle-list" list="plate-number-list" id="exampleDataList" placeholder="Plate number">
  <datalist id="plate-number-list">
    <option value="San Francisco">
    <option value="New York">
    <option value="Seattle">
    <option value="Los Angeles">
    <option value="Chicago">
  </datalist>
</div>

Solution

Using the legend tag

You can use the fieldset + legend combo to get a similar effect using pure CSS. See the snippet below:

fieldset {
  border-radius: 5px;
  width: max-content;
  border: 1px solid #D4D4D5;
}

legend {
  font-size: 12px;
}

#exampleDataList {
  width: 15rem;
  border: none;
}

#exampleDataList:focus {
  outline: none;
}

<fieldset>
  <legend>Select Plate number</legend>

  <div class="select-vehicle">
    <input placeholder="Plate number" list="plate-number-list" id="exampleDataList">
    <datalist id="plate-number-list">
      <option value="San Francisco">
      <option value="New York">
      <option value="Seattle">
      <option value="Los Angeles">
      <option value="Chicago">
    </datalist>
  </div>

</fieldset>

Alternative

You can give label a relative position and move it towards the position like in the picture you have given. See the snippet below:

.select-vehicle {
  display: flex;
  flex-direction: column;
}

.form-label {
  font-size: 12px;
  position: relative;
  background: #fff;
  width: max-content;
  padding-inline: 5px;
  top: .5rem;
  left: .8rem;
}

#exampleDataList {
  width: 15rem;
  padding: .8rem 1rem;
  border: 1px solid #D4D4D5;
  border-radius: 5px;
}

<div class="select-vehicle">
  <label for="exampleDataList" class="form-label">Select Plate number</label>
  <input placeholder="Plate number" list="plate-number-list" id="exampleDataList">
  <datalist id="plate-number-list">
    <option value="San Francisco">
    <option value="New York">
    <option value="Seattle">
    <option value="Los Angeles">
    <option value="Chicago">
  </datalist>
</div>

More on css positions here.

Answered By - Yong