Creating a dropdown menu within a customized input field: A step-by-step guide

<div class="row">
  <div class="col-11">
    <input type="password" class="form-control"  placeholder="Enter your last name" id="pwd">
  </div>
  <div class="col-1">
    <div class="dropdown">
      <button class="dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      </button>
      <div class="dropdown-menu" aria-labelledby="">
        <a class="dropdown-item" href="#">Male</a>
        <a class="dropdown-item" href="#">Female</a>
      </div>
    </div>
  </div>
</div>

I am trying to achieve a dropdown list inside an input text field, similar to what is shown in this image using bootstrap. Despite my efforts, I have been unable to accomplish this task. Please excuse my lack of experience in design - any assistance would be greatly appreciated. Thank you in advance.

htmltwitter-bootstrapcsstwitter-bootstrap-3bootstrap-4

Answer №1

I'm not entirely certain about your query, however, I believe the solution you are seeking can be found below:

 <select>
  <option value="value1">value1</option>
  <option value="value2">value2</option>
  <option value="value3">value3</option>
  <option value="value4">value4</option>
</select>

To learn more, please refer to this page.

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

Unable to specify the width for a DIV element

I am in the process of creating a gaming website and have encountered an issue with setting the size of the genre menu using the DIV tag. Below is a snippet of the HTML code I am using: <div class="center"> <div class="menu" onclick="loc ...

html

Utilize CSS to ensure that the hover effect of the main navigation remains active even when the mouse hovers over the sub-menu

Is there a way to make the hover state in navigation items persist when the mouse hovers over a sub-menu? Currently, when hovering over a top-level nav item, the link color changes to white and background turns black, but this reverts back once the mouse m ...

csshover

I am experiencing an issue with a jQuery click event not firing when attempting to swap text on the first click

I'm a beginner in the world of javascript and jquery, and I've encountered an issue with a piece of code that swaps one text for another. The problem arises only during the initial click on the div. Any suggestions? I suspect I might be calling ...

javascriptjqueryhtmlcssclick

Tips on personalizing the default html template in nuxt

Struggling to customize the default page from my Nuxt app due to limited documentation. Link to Documentation I'm interested in extracting only certain elements like the title or links in the head section. For example, how can I access just the li ...

javascripthtmlvue.jsnuxt.js

Display a JQuery dropdown menu depending on the ID of the current section

In my one-page structure, I have multiple sections with a categorized nav-bar that includes drop-down lists for each category. My goal is to display the drop-down menu of the category corresponding to the current section. if($("#About").hasClass('act ...

jquerycssdrop-down-menunavbar

The feature of securing HTML forms by user session

I have developed a website that enables the submission of HTML forms with multiple stages of authorization. For instance, an employee submits a leave request which is then approved by a supervisor. There can be multiple users with permission to authorize a ...

javascriptphpjqueryhtmlajax

Is there a way to execute a Python script when submitting an HTML form?

I have created an HTML form and my goal is to utilize Python to transfer the data from this form into an SQLite database file. Currently, I am attempting to achieve this using CGI. I don't require anything extravagant. Below is the code that I am work ...

pythonhtmlcgi

What is causing the div to not update until the for loop is completed?

I have an HTML page where I am trying to update a div while a for loop is running. However, the div does not update until after the loop finishes. Why is this happening? <!DOCTYPE html> <html> <body> ...

htmlloopsdisplay

Stretching of images in Safari and Chrome

Having trouble with image display on different browsers? Look at my code snippet below: <style> #globalpsa { width:100%; height:100%; border:3px double #fff; margin:2% auto; } #globalpsa input[type="image"] { wid ...

htmlcssfirefoxgoogle-chromesafari

Adding styles to specific child nodes within a p-tree component in PrimeNG

Starting off with a demonstration example: Check out this StackBlitz for primeng p-tree. I am utilizing primeng to construct a structure for polls and answers using p-tree. The hierarchy is as follows: Participants --> Polls --> Questions --& ...

javascriptcssangulartypescriptprimeng

Ways to vertically align a div in Bootstrap 4?

As I delve into working with bootstrap 4, I am experimenting with creating various basic layouts. In line with the guidelines provided in bootstrap 4 documentation, I aimed to vertically align block elements by applying the class align-items-center. Despi ...

cssbootstrap-4

Tips for saving two text inputs using a JavaScript function into a single .txt file

Currently, I'm developing a webpage where users can input values into two textarea fields. Upon clicking the submit button, the program should trigger a download of both text inputs and store them in a text file. While I have successfully managed to s ...

javascripthtmljquerydom-eventstextarea

Repeatedly animate elements using jQuery loops

Whenever I click a button, a fish should appear and randomly move over a container at random positions. However, in my current code, the animation only occurs once and does not repeat continuously. I want to create a generic function that can be used for m ...

javascriptjqueryhtmlanimation

Surge the PrimeNG DialogModule by integrating the CalendarModule to enhance its functionality

Looking for a way to create an Edit popup dialog that includes an input form in Angular2 using the PrimeNG widgets. I have encountered issues with the dynamic content of the dialog box as shown in the screenshot. https://i.sstatic.net/r3INA.png I attempt ...

cssangularprimeng

The table does not appear correctly when the data within it is concealed

Table structure appears correctly in Mozilla browser, however it collapses in Chrome. The table data will be populated upon selecting an option from the dropdown menu. I attempted using table-layout: fixed but it did not resolve the issue. ...

htmlcss

When using the android phonegap application, the screen interface may not render properly and display a patch on the keypad area when the keypad is

Whenever I tap on a textbox, the system keypad pops up. But after entering text, if I click on any link instead of pressing the Go button on the keypad, the keypad disappears but leaves behind a random area or displays the previous screen. When navigating ...

androidjqueryhtmlangularjscordova

What are the steps for creating an animated visualization of the peak chart?

As a newcomer to CSS and Javascript, I am currently struggling with animating a peak (bar) chart that I came across on codepen. If anyone can provide assistance or guidance, it would be greatly appreciated! The chart can be found here: http://codepen.io/An ...

javascripthtmlcssanimationcharts

The feature "text-underline-position: under" is not functioning properly in Android Chrome

Take a look at this example page: html, body { margin: 0; padding: 0; } header { padding: 16px 0; text-align: center; background: black; } header img { width: 234px; height: 222px; ...

androidhtmlcssgoogle-chromemobile

I am currently working on making my social items more responsive, however, I am encountering some issues. Any ideas or suggestions on how to resolve this

Find my resume project on GitHub at https://faizan-ul-hasnain.github.io/Resume-Project-/ and let me know how to improve it. Visit my resume project here ...

htmlcss

Inject pure HTML code into a react div

I have extracted raw HTML content stored in the database and I am attempting to display it within a div element. const style = { border: '2px solid #eee', height: '270px', width: '100%', overflow: 'auto&ap ...

htmlreactjs