How can you design an input type text to resemble a select dropdown?

Is there a way to customize an input type=text element to appear as a dropdown? Currently, I have a text box that, when clicked, displays options using jQuery and a div. I want the text box to include a dropdown icon to mimic a traditional dropdown menu.

Furthermore, since different browsers offer different dropdown icons, is it possible to utilize the browser's default dropdown icon?

Note: I need to add some CSS to the option values before displaying them, which is not possible with a standard dropdown menu. This is why I am using a div and jQuery to display the options.

jqueryhtmlcssinput

Answer №1

Give this code snippet a try!

<div>Select a browser from the following options:</div>
<input list="browsers" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>


<div>Select a browser from the following options:</div>
    <input list="browsers" />
    <datalist id="browsers">
      <option value="Chrome">
      <option value="Firefox">
      <option value="Internet Explorer">
      <option value="Opera">
      <option value="Safari">
    </datalist>

Answer №2

Using the :after pseudoelement is a great way to add additional styling to your elements. Consider wrapping your input in a DIV to achieve this.

 #wrap:after {
     content:arrow icon image;
 }

Check out this JSFiddle for an example.

Keep in mind that currently, it may be challenging to use different CSS stylesheets for different browsers, so you may be limited to one type of icon for now.

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

Seeking assistance with coding a beginner-level Google Chrome extension

Currently, I am working on developing a basic Google Chrome extension with 2 or 3 browser actions. I have been using Selenium IDE to capture the necessary steps in Firefox that I need for my project. However, I am unsure of how to translate these recorde ...

javascripthtmlgoogle-chromeseleniumgoogle-chrome-extension

Utilizing the text field feature within Twitter Bootstrap 3.0 in-line styling

I am attempting to create a horizontal form with an inline text field split into two sections: one on the left and one on the right. The left side will contain horizontal text fields, some of which are inline, while the right side will have a mix of inline ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Is there a way to modify multiple divs' ids or classes in order to update their styling?

http://jsfiddle.net/GHuwV/2/ $("#container").each(function () { $(this).find('.taskName').each(function () { if ($(this).attr('value') == 'Each') { $(this).css('div#gold div.gold', 'gol ...

jquery

Cross-Origin Resource Sharing (CORS) for HTML

Here is a code snippet I found on http://jakearchibald.com/scratch/alphavid/ $("#video").append('<video id="movie" style="display:none" autobuffer><source id="srcMp4" src="https://host-away-from-host.com/file.mp4" type=\'video/mp4; ...

javascripthtmlhtml5-videocors

jQuery Ajax call not receiving POST response from PHP/CodeIgniter

My jQuery Ajax Post request calls a Code Igniter function, triggering it to send an email with information from the post request. JavaScript Code: $.ajax({ type: 'POST', url: 'http://localhost/admin/index.php/callback', da ...

phpjqueryajaxcodeigniter

Using JQuery to visually enhance the menu selection by displaying an image and altering the background color upon hovering

Hello fellow JQuery/Javascript beginners! I recently put together a menu and wanted to add some interactive elements. Specifically, I want the background color to change when a user hovers over an item (simple enough with CSS), but I also want to include a ...

javascriptjqueryhtmlcss

Positioning Tumblr blockquotes beneath each other, rather than within

Just diving into the world of HTML/CSS and I've been working hard on creating my own Tumblr theme (almost finished!). One issue I'm having is styling the replies, which are in blockquote form. I want them to display one after another in a line li ...

htmlcsstumblr

Arrangement of HTML divs and styling classes

I have been experimenting with divs and classes in order to achieve proper alignment of text on my website. Currently, I am working with 2 classes that I would like to display side by side to create 2 columns. However, the right column containing the text ...

htmlcss

Consolidate two AJAX requests into a single callback

I'm developing a Chrome extension and facing the challenge of merging two separate AJAX calls into one callback upon success. What would be the most efficient approach to achieve this? Auth.prototype.updateContact = function(id, contact_obj) { var ...

javascriptjqueryajaxgoogle-chrome-extensioncallback

Error: The 'length' property cannot be searched for using the 'in' operator

Hmm, I keep getting an error that says "Uncaught TypeError: Cannot use 'in' operator to search for 'length' in" Every time I attempt a $.each on this JSON object: {"type":"Anuncio","textos":["Probando ...

javascriptjqueryjsongetjson

What's the best way to eliminate the space between vertically aligned divs?

I've been attempting to adjust the space between div 1 and div 2, but despite adjusting margins and padding, the gap persists. When modifying properties on the parent div, the children divs end up extending beyond the parent. I realize my approach to ...

htmlcss

Tips for changing an input value when clicked using JQuery

Struggling to create an interactive mind mapping tool using JQuery? One challenge I'm facing is editing the content of a div once it's been set. I've implemented a function that successfully adds text to a div within the (mind-container). H ...

javascriptjqueryhtmlinputclick

Top method for converting scrolling into an element

When trying to create a scrollable element, I attempted the following: .scroll-content { overflow: hidden; } .scrollabe { overflow-y: scroll; } <ion-content> <ion-grid style="height:100%" *ngIf="plat && ticket"& ...

htmlcssangularionic-framework

Issue with Refreshing Header Row Filter Control in Bootstrap Table

Currently in the process of developing an application that utilizes Bootstrap Table and its extension, Filter Control. One feature I've incorporated is individual search fields for each column to enhance user experience. The challenge I'm facing ...

javascripthtmljquerybootstrap-4bootstrap-table

Issues with FullCalendar.js failing to consistently fire when used in conjunction with JS/Ajax/ColdFusion

Attempting to troubleshoot an issue with FullCalendar.js integration on an external page called "calendar_summary.cfm", which is part of a series of pages reloading on a main page. The data from calendar_summary.cfm is transferred into FullCalendar.js thro ...

javascriptjqueryajaxcoldfusion

Obscure Promise Structure - Accomplish, Flop, Achieved

I came across the following code block and I'm struggling to understand it. While I have a good grasp on promises in the context of: deferred.then(successCb, errorCb); This code snippet appears to have three callbacks (complete, fail, done>) whic ...

javascriptjquerypromise

Tips for personalizing the color scheme of Material UI Stepper Step?

I need help customizing the disabled Step color for Material UI Steppers. The default colors are Blue for enabled steps and Grey for disabled steps, but I want to change it to a different color as shown in this example: https://i.stack.imgur.com/HGGxp.png ...

javascriptcssreactjsmaterial-ui

Assign a value to a jQuery variable from user input

Can someone assist me in setting an input field to the value of a jQuery variable? I am encountering difficulties with this task. My aim is to have equipment failure counts appear in an input textbox so that I can later write the value back to a table. Eac ...

htmljqueryvariables

Activating a jQuery function as you move an item across the screen

Exploring the world of jQuery, I am eager to incorporate its drag and drop feature into my project. As I drag an item, I wish to invoke a function without interrupting the dragging process. The goal is to seamlessly continue holding the item while the func ...

jquerydrag-and-dropjquery-ui-sortablecontainment

Having issues with the functionality of jQuery's remove method?

I need help with removing specific li elements from my HTML code. Here is the snippet of HTML: This is the jQuery code I have been using: $("li").remove(":contains('undefined')"); Any assistance would be appreciated! ...

jquery