Creating a custom icon and static placeholder in a bootstrap dropdown list

I am just starting out in the world of web development and I have been experimenting with creating a dropdown list that includes a static, slightly faded placeholder, along with a custom icon. My goal is to have the selected item's text displayed on the dropdown once it has been chosen by the user. Despite trying various methods, the code snippet below brings me close to what I want, but not quite there yet. Additionally, I am unsure if this is the most effective approach to achieve the desired outcome.

Is there a feasible way to design a bootstrap (or non-bootstrap) dropdown that features a fixed placeholder, custom icon, and updates its display text based on user selection?

<div>
  <label type = "button">Fruit</label>
  <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Apple</a>
    <a class="dropdown-item" href="#">Blueberry</a>
    <a class="dropdown-item" href="#">Pear</a>
  </div>
</div>
</div>

https://i.sstatic.net/EcS4y.jpg

javascriptjqueryhtmlcssbootstrap-4

Answer №1

Kindly regard this code snippet as a plausible solution.

$(".dropdown-item").click(function(){
  $(".dropdown-item").removeClass("active");
  $("#dropdownMenuLabel").text(this.innerHTML);
  $(this).addClass("active");
});
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="text-dark">Fruit</span> <span id="dropdownMenuLabel"></span>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Apple</a>
    <a class="dropdown-item" href="#">Blueberry</a>
    <a class="dropdown-item" href="#">Pear</a>
  </div>
</div>

Answer №2

The most straightforward method is to utilize Fontawesome, Material Icons or another icon kit and incorporate their CDN links.

Your code snippet will resemble something like this:

<!-- Insert this line to use Google's Material Icon -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

After that, simply integrate it into your code like so:

<!-- Using CDN -->
<a class="dropdown-item" href="#">
   <!-- This will display a favorite icon -->
   <i class="material-icons">favorite</i> 
   Apple
</a>

You can refer to here for more comprehensive details.

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

Ways to align the contents of a div in the center

Looking at the content in this div, it seems that the top is positioned higher than the bottom. Can anyone provide some guidance on how to fix this? .dtestContactDet{ border-bottom:1px solid #D7D7DE; border-bottom:1px solid #D7D7DE ; -khtml-border-bo ...

css

Enlarged text size disrupts alignment of ul menu items

After creating a fixed menu using unordered lists and extensive CSS, I added a custom class button that redirects back to the frontpage. However, I noticed an extra pixel of height in the menu causing alignment issues with the buttons. The big button stick ...

htmlcss

Ensuring the input element is correctly aligned in its position

How can I center the input element inside its parent without any top margin? What CSS changes do I need to make? #menu { height:30px; background: #ccc; } #board-name { display:block; margin-left:auto; margin-right:auto; height: 80%; vertical-al ...

htmlcssinputposition

The utilization of AJAX commands within the appgyver steroids platform is a game

After transferring my phonegap project to steroids, I am encountering issues with my ajax commands not functioning properly. I am completely stumped as to what could be causing this problem, so any suggestions would be greatly appreciated. The culprit see ...

javascriptjqueryajaxcordovasteroids

"Utilizing Kendo's server-side paging feature to efficiently handle large datasets and

I am facing an issue with my Kendo Datasource and the resulting JSON data. The JSON has a column called "TotalRecords" and I need to set this total to the Kendo Datasource so that my server paging can work correctly. Below is the code snippet that I am cur ...

jquerykendo-uikendo-grid

Issue with AngularJS UI Router not loading the inline template and controller

I am trying out UI Router for the first time in my AngularJS project. I am facing an issue where, when I click on a link to view a post, it doesn't display. The post template is not visible and I remain on the home page. The URL flashes as http://loc ...

javascriptangularjsroutesangular-ui-router

Optimizing communication of time data in Laravel and Vue.js using Inertia

Currently, I am encountering an issue while working with Laravel Inertia and Vue.js. The problem arises when the time is transferred between Laravel and Vue.js, as it always converts to UTC automatically, which is not what I want. For instance, if I am u ...

javascriptlaravelvue.jsinertiajs

Utilizing Multer for temporarily storing a file in memory before parsing and transferring it to the database

As a newcomer to programming, I am attempting to describe my issue concisely. I am utilizing multer to upload an XML file in conjunction with a Node Express server and React with .jsx. My intention is to parse the uploaded file data and post it to a Postgr ...

javascriptnode.jsexpressreactjsmulter

How to Implement Page Calling in JSP without the Action Attribute

Is there a way to call another JSP in a JSP after submitting a form without using the action attribute? I have the limitation of not being able to use the action attribute, but still need to call another JSP. I attempted to use jQuery ">" $('# ...

jqueryjsp-tags

Utilize a CSS selector to target all deleted nodes using the MutationObserver in the HTML5 API

Is there a way to retrieve all removed nodes from the DOM that have specific classes using CSS selectors? Below is an example of how it can be done with some complexity, but is there a simpler and more general approach? new MutationObserver(mut =& ...

javascripthtmlcssmutation-observers

When the async attribute is added to the HTML code, Angular is no longer defined

Looking to optimize the performance of my website in Chrome Audit, I decided to add 'async' to my script tag like this: <body ng-cloak id="body"> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry ...

javascripthtmlangularjsseoaudit

Conceal object after a brief pause

Why does the element hide immediately instead of slowly fading out? I can't figure out why it doesn't first display the "P" tag and then gradually hide it. Please help me solve this issue. var step = 0.1; var delay = 90000; var displayMe = fun ...

javascript

How can we convert props into state once they have been initialized using GetDerivedStateFromProps?

Presented here is a straightforward Component design: export default class Editor extends Component { constructor(props) { super(props); this.state = { field: "Some Initial Text" }; this.handleChangeField = this.handleChangeField.bind(this ...

javascriptreactjsreact-redux

Enhancing Couchdb documents with unique id and author information through an update handler

Is there a way to include additional fields using the update handler in Couchdb? I'm trying to insert the author (with a validation function to verify that the user is logged in) and the id when creating a new document via an update handler. The auth ...

javascriptcouchdbcouchapp

What steps do I need to take in order to integrate my unique landing page design into Wordpress

Currently, I am involved in a project that utilizes Node.js on Docker. As part of this project, I have developed a landing page using Bootstrap. In the future stages of the project, our team plans to incorporate Wordpress as a content management system ( ...

node.jswordpressbootstrap-4twitter-bootstrap-3

Utilizing Office.js: Incorporating Angular CLI to Call a Function in a Generated Function-File

After using angular-cli to create a new project, I integrated ng-office-ui-fabric and its dependencies. I included in index.html, added polyfills to angular.json, and everything seemed to be working smoothly. When testing the add-in in Word, the taskpane ...

javascriptangulartypescriptangular-clioffice-js

Discover the hidden content within a div by hovering over it

Here is an example of a div: <div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tinc ...

javascriptjqueryhtmlcss

Presenting tailored information within a structured chart

Working on my angular project, I have a table filled with data retrieved from an API. The table includes a status column with three possible values: 1- Open, 2- Released, 3- Rejected. Current display implemented with the code snippet <td>{{working_pe ...

htmlangulartypescript

Self-moving button container

I have a challenge involving a button and a sliding div. When the button is clicked, I want the div to slide. The problem arises when I place the button inside the sliding div - it ceases to slide. I understand the issue at hand, but I'm unsure of ho ...

javascriptjqueryhtml

Which option offers superior performance: using attributes through HTML or jQuery?

At times, I find myself needing to include special classes, divs, and attributes in my HTML code for jQuery scripts to function properly (the site's "no-JavaScript" version doesn't require these elements). You probably understand what I mean. I& ...

javascriptjqueryhtmlperformance