Attempting to center the text directly above the input field

Is there a way to align text on top of an input box without manual adjustment? Any suggestions on how to achieve this?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72101d1d06010600130232465c445c43">[email protected]</a>/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>

htmlcssbootstrap-4

Answer №1

Utilizing the legend Element

One way to achieve a similar effect using only CSS is by combining the fieldset and legend elements. Take a look at the code 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 Approach

Another method is to position the label element relative to achieve a similar visual effect as shown in the image. Refer to the code 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>

For more information on CSS positions, visit this link.

Answer №2

The term "legend" was referenced in the title and the image appears to mimic a <fieldset>, but Bootstrap has altered the fieldset rendering it unrecognizable. Below is the code snippet with Bootstrap classes applied to create a fieldset that actually looks like a fieldset:

<fieldset class="border rounded p-2">
  <legend class="float-none w-auto"></legend>
</fieldset>

I made adjustments by adding .h6 and .mb-0 to the <legend> to reduce the font-size and margin-bottom. Do you really require a <label>, or are you including more form controls within 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b4944445f585f594a5b6b1e051a0518">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
  <style></style>
</head>

<body>
  <main class="container">
    <section class="row">
      <form>
        <fieldset class="border rounded p-2">
          <legend class="float-none w-auto mb-0 h6">Select State of Registration: </legend>
          <input id='state' name="state" class="form-control" 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d2f2222393e393f2c3d0d78637c637e">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
  <script></script>
</body>

</html>

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

html input type called array named AmountMap[1] is unable to be configured with <input type="textbox" size="15" name="amountMap[1]" value="0" >

**Having trouble setting the value of an HTML input type named like an array AmountMap[1] <input type="textbox" size="15" name="amountMap[1]" value="0" > When trying to set amountMap[1].value='10', ...

javascripthtmljquery

The vanishing HTML Div with a fixed height

After implementing a navigation bar inside my header container, I noticed that the main_image div with a blue background color disappeared. Despite setting a height for it, the div was nowhere to be seen. Additionally, the welcome_text div seemed to lose i ...

csshtmlheight

retrieve the Jquery progress bar's current value

Having trouble determining the value of the progress bar in order to increase it by a percentage with each step. No matter what I attempt, I keep getting errors such as 'undefined' or 'method cannot be called before object instantiation.&apo ...

jqueryhtml

What is the process for implementing an image as the background instead of a color for each column in a Google chart?

I'm currently working with Google Chart and I have set up a column chart. However, I am looking to display a background image instead of a background color in each column. Is this achievable with Google Chart? If so, how can I accomplish this? If anyo ...

javascriptcsschartsgoogle-visualization

Ways to automatically style the child divs within a parent div

I'm trying to figure out how to float a parent div with child divs of different widths and heights while maximizing the use of space and not being affected by absolutely positioned elements. For reference, here's an example: http://jsfiddle.net ...

javascripthtml

Steps for incorporating buttons and input fields on a WordPress website

I recently customized an HTML block on my WordPress.com site and created a simple code snippet to function as a search widget. I've experimented with various approaches, such as attempting to trigger a script function with a button, making the functi ...

htmlwordpress

Enhancing user experience by implementing dynamic text box functionality that triggers ajax load for dropdown options using a combination

Here is the task I need help with, along with the code snippet: I want to enable the author select box when both the start and end dates are filled out. The author names should be fetched dynamically from the database based on the selected start and end ...

phpjqueryhtmlajaxjquery-ui

How can you use jQuery to target a textbox based on its value that includes quotation marks?

Dealing with a JavaScript string that includes a quote mark can cause some difficulties. For example, strings like Don't click this checkbox or He said "hi" pose unique challenges when trying to find an exact match in a checkbox value. Consider the H ...

javascriptjqueryhtml

Scrollbar generation causing spacing issues in Internet Explorer

So I've been working on implementing a scrollable div with a specific code overflow: auto; However, for some reason, when viewed in Internet Explorer, the scroll creates an unexpected margin on the right side. It functions properly on both Chrome an ...

htmlcssinternet-explorerscrolloverflow

Only expose the next element when the collapse occurs

In my Flask templates, I am facing an issue with displaying scores using a collapse feature: Contact.html <button type="button" class="btn btn-secondary btn-sm" data-target="#score" data-toggle="collapse" data-pla ...

htmlbootstrap-4

Sort various divs using a list

I have multiple divs containing different content. On the left side, there is a list of various categories. When a category is clicked, I want to display the corresponding div for that category. Initially, I want the main category to be loaded, with no opt ...

javascripthtmljqueryfilter

Leveraging the Railway Pathway from the Google Maps API

I need to customize my map to display only railway stations instead of the entire map. How can I achieve this? Below is the code I have attempted: <html> <head> <style type="text/css"> html { height: 100% } ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

Creating a custom dialog box using JavaScript

How can I create a customized dialog box in the center without displaying "the host name says..." using CSS? function myFunction() { alert("Record Save"); } Thank you in advance! ...

javascriptcss

What is the best way to set up a condition that only runs if an element does not contain a certain class, such as "active"?

Click here for the picture I have a list of items: a, b, c, d, e, f. Whenever I click on item b, it becomes active and the other elements lose the "active" class. When an element has the "active" class, I want the background to change accordingly. If it ...

jqueryhtmlcssonclick

The content of my menu is concealed within a DIV. It may remain hidden or malfunction

I am in the process of creating master pages. In one of the master pages, I have implemented a dropdown menu using jQuery and CSS. While it works perfectly fine on some pages, it seems to be hidden on others that contain a div element. This is because the ...

jqueryhtmlcss

Instantly appearing and disappearing Bootstrap modal popup catches users off guard

I've encountered an issue with my bootstrap popup that displays student results - it opens and closes immediately. In my master page file, I have included the following JS files: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="ser ...

javascriptcssasp.nettwitter-bootstrapmodalpopup

execute the code when the device is not an iPad

if ( (navigator.userAgent.indexOf('/iPadi') != -1) ) { } This conditional statement is used to identify whether the user's device is an iPad, but I specifically want to execute the code only if it is not an iPad. I have a JQuery hover func ...

jqueryhtmlipaduser-agent

Ensure that jquery.load is executed before the HTML content is loaded

Recently, I encountered a situation where I had a bootstrap navbar stored in a separate file, specifically named navbar.html. I utilized Jquery.load() to load this navbar into my HTML page. At the bottom of my HTML page, I included the following code: &l ...

javascriptjqueryhtmlcsstwitter-bootstrap

Utilizing Flask to gather information from a leaflet map

I am currently working on creating a webpage using Flask. The webpage features a leaflet map where users can click to create a marker that opens a popup window with a link. The link's purpose is to open a new page displaying the longitude and latitude ...

javascripthtmlflask

Tips for creating a gradual fade-out effect on a bootstrap modal window

One issue I'm facing is with my modal dialog (#busyIndicator). It simply displays a message that reads "Please Wait". Sometimes, the operation it's tied to completes so quickly that the visual transition between showing and hiding the dialog beco ...

javascriptjqueryhtmlcsstwitter-bootstrap