"Choose" with the icon permanently attached

I am looking to customize a select element to choose a month. I want the dropdown list to display only the name of the months (e.g., January, February). However, in the selected value box of the select element, I would like to show a FontAwesome icon representing a calendar followed by the name of the selected month.

This is how I envision the styled select with the closed dropdown list:

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

I have achieved the custom styling, but my current dropdown list looks like this:

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

What I'm aiming for is a design similar to this (without the calendar icon being duplicated):

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

Here is the code snippet I am currently using:

<select>
    <option value="all">&#xf133; All</option>
    <option value="m01">&#xf133; January</option>
    <option value="m02">&#xf133; February</option>
</select>

Can anyone provide guidance on achieving the desired layout?

htmlcssdrop-down-menuhtml-select

Answer №1

Take a look at this solution.

http://jsfiddle.net/afshinprofe/qhCsJ/1/

This method perfectly fits your requirements. Simply enclose your select element within a container, then apply a background image with padding and no repeat, similar to how it's done for a text input.

<div class="selectParent">
     <select>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>           
     </select>  
 </div>

Next, add the following CSS:

.selectParent{
    width:80px;
    overflow:hidden;
}

.selectParent select{
    width:100px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 2px 2px 2px 20px;
    border: none;
    background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat left center;
}

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

Issue with reactivity not functioning as expected within VueJS loop without clear explanation

Struggling with implementing reactivity in vue.js within a loop? The loop renders fine, but firing an event updates the content without visibly rendering the data on the page. The latest version of vue.js is being used with bootstrap and jquery. Despite a ...

javascripthtmlvue.js

Expanding the link directory

I am struggling with accessing the "file.php" in the "folder1" directory from the "site" directory. The href path I'm using is: href = "folder1/file.php" However, it redirects me to: href = "folder1/folder1/file.php" Additionally, when try ...

phphtmlbootstrap-4

Is it achievable to create shadows that do not overlap?

When you hover your mouse over the pill-shaped object, it should smoothly move over the circle as desired. However, the shadow of the circle still remains visible creating an unwanted effect. I am looking for a solution where the shadows do not overlap but ...

cssbox-shadow

What is the best way to display index.ejs when the input field is blank?

If the input field is left empty when I click the form button, I want to redirect to "/". After clicking the button, the desired URL should be: http://localhost:3000 Header.ejs <form action="/search" method="GET"> < ...

javascripthtmlnode.jsexpressejs

Unable to locate the JavaScript/jQuery key

Struggling with a dictionary in JavaScript being passed to a function in Django. Despite the key existing, I'm getting an error saying 'key message not found'. As a newbie in Javascript and JQuery, I must have made a simple mistake somewhere ...

javascriptjqueryhtmldjango

What could be causing the div class to move downward in the CSS code?

I have posted a question, but unfortunately, no one has answered it yet. Here is my code snippet: * { margin: 0; padding: 0; } body { width: 100%; font-family: 'Cabin', sans-serif; background-color: #333; } .firstnav { ...

htmlcss

Discrepant alignment of form group among the other elements in Bootstrap CSS

Currently, I'm working on an HTML horizontal form that includes buttons and text inputs. I'm using Bootstrap 3 for this project. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> <fo ...

csstwitter-bootstrap-3

Challenge in creating a responsive layout using Bootstrap framework

I'm working with Bootstrap, but I'm struggling to achieve the desired layout. My goal is to have the design adapt like this on different screen sizes: ---------------------- Headline | | | image | ----------| | B ...

csstwitter-bootstrap

Why is the 3D CSS transform (translateZ) feature malfunctioning on Android 4.0.3?

I have this HTML code that is functioning well on Chrome, Safari, and Mobile Safari. However, when testing it on Android 4.0.3, the translateZ property does not seem to have any desired effect on the div element. While everything else works as expected, ...

androidcss3dwebkittransform

Tips for customizing the appearance of a Bootstrap toggle switch

I'm struggling to customize my bootstrap toggle button. No matter what I try, I can't seem to make any styling changes take effect. All I really need to do is increase the width of the button, but even that seems impossible. Here's a link t ...

cssbootstrap-4togglebutton

struggling to find the precise value in the array

my original result is displayed below: [status] => 1 [schedule_status] => 1 [cid] =>3 [cdate] => 16-10-18 01:10:52 [did] => 16 [jid] => 4 However, when I try to extract individual array values using the following code: $count = count($ ...

phpjqueryhtmlajax

Angular: Display an element above and in relation to a button

Before I dive in, let me just mention that I have searched extensively for a solution to my problem without much luck. The issue is describing exactly what I'm trying to accomplish in a way that yields relevant search results. If you're interest ...

cssangularhtmltypescript

Expanding the navigation bar causes it to reach the second row after being translated

I am currently working on a website that will be dynamically displayed in both English and Spanish. One issue I have encountered is that the longer words in Spanish are causing the navigation bar to spill onto a second row. For more details, please visit: ...

phphtmlcss

How to turn off the default print media query in Zurb Foundation 5 without relying on SASS

I've been having trouble with printing website pages that are built using Zurb Foundation 5. Whenever I try to print or preview the page, it defaults to the `medium` grid size and looks different from how it appears on the desktop version. I've ...

htmlcsszurb-foundation

Define the width of jqgrid

I have been utilizing SmartAdmin jqgrid to showcase data in tabular format. The number of columns in the datatable changes dynamically each time. I am converting the DataTable to a JSON object and assigning it to the jqgrid. However, it appears that jqgrid ...

htmlcssjsonjqgridsmartadmin

Unable to choose fields and options within the popup box

Interacting with jQuery: $("#type_name").click(function(){ $("body").append('<div class="modalOverlay">'); $("#add_form").fadeIn(1000); $("#first_name").val(""); $("#email").val(""); ...

javascriptjqueryhtmlcsspopup

Pop-up window for uploading files

Looking for assistance with my file uploading system. I am utilizing a unique purple button from http://tympanus.net/Development/CreativeButtons/ (Scroll down to find the purple buttons). Additionally, I am using a wide, short content popup feature availa ...

javascriptjqueryhtmlcsstwitter-bootstrap

The object of type 'NoneType' does not have the 'next_element' attribute

Here we have an HTML snippet of a website with a single itemprop="brand": <dd itemprop="brand" class="attributeValue-2574930263"> <a class="link-3970392289 link__default-1151936189 attributeLink-2414863004&qu ...

pythonhtmlbeautifulsoupnonetype

Tips for eliminating the bottom border on a nav-tab in Bootstrap 4

When a vertical navigation menu item is selected, a border appears below the item. How can I remove this border? .nav-tabs li, .nav-tabs li a { border-bottom: none; } Here is a picture of the border: ...

cssbootstrap-4

Accessing the value of a hidden field within an ng-repeat loop when binding to an HTML table

I am working on a project where I have an HTML table with data being bound from AngularJS. The structure looks something like this: <tr ng-repeat="item in List| filter: { MachineType: 'Physical' }"> <td>{{item.MachineType}}< ...

javascripthtmlangularjs