Trying to align the text on top of the input box-CodePudding

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

refer

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<div >
  <label for="exampleDataList" >Select Plate number</label>
  <input  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>

CodePudding user response：

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 >
    <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 >
  <label for="exampleDataList" >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.

CodePudding user response：

In the title "legend" was mentioned and the pic resembles a <fieldset> and Bootstrap has foobared the fieldset to be unrecognizable. Here is the markup with BS classes for a fieldset that resembles a fieldset:

<fieldset >
  <legend ></legend>
</fieldset>

I added .h6 and .mb-0 to the <legend> to decrease both font-size and margin-bottom. Are you sure you need a <label> or are you adding more form controls to the fieldset?

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style></style>
</head>

<body>
  <main >
    <section >
      <form>
        <fieldset >
          <legend >Select State of Registeration: </legend>
          <input id='state' name="state"  list="state-list" placeholder='State'>
          <datalist id="state-list">
                <option value="San Francisco">
                <option value="New York">
                <option value="Seattle">
                <option value="Los Angeles">
                <option value="Chicago">
            </datalist>
        </fieldset>
      </form>
    </section>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script></script>
</body>

</html>

Using the legend tag

Alternative

Using the `legend` tag