The steps to set a personalized icon for a date input field

Trying to add a custom icon for a date input field similar to the one shown in this image. Despite successfully creating a custom icon on a button, struggling to do the same for a date field.

<div id="send-date" class="transaction-details" data-role="fieldcontain" data-theme="gr">
   <label for="date">Send on</label>
   <input type="date" name="date" id="date" value="" placeholder="" data-icon="date" data-iconpos="right" />
</div><!-- /send-date -->

Are there any other methods to achieve this?

link to code link to custom icon

Answer №1

Here is an example I created for you: http://jsfiddle.net/Gajotres/WFz37/

To implement this, wrap the input with the same div that is used to wrap the input field for listview filtering. Then, add the following JavaScript code:

$('input[type="text"]').removeClass('ui-input-text ui-corner-all ui-shadow-inset').addClass('ui-input-text');
$('#custom-input-wrapper').removeClass('ui-icon-searchfield').addClass('ui-custom-icon');

The only requirement is a 16x16 image, but you can use a larger one and adjust the CSS accordingly to achieve the desired style.

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

What is the best way to alter the background of a div when hovering over a button in a separate div?

Looking to change the background of one div when hovering over a button in another div? Hello, I have a task where I need to modify the background color of a specific div when a button below it is hovered over. The setup involves having an image (a tshir ...

Issue with CSS not loading correctly when switching routes in AngularJS using Gulp and Router

I currently have a router set up in my application: var mainmodule.config(function($routeProvider){ $routeProvider.when('/home',{ templateUrl:'src/home/home.html' }; $routeProvider.when('/home/sports',{ ...

Ensure that outlines are visible only when navigating with the tab key using tabindex

Currently, I am working on enhancing the accessibility of my website by improving navigation using the tab button. I have implemented tabindex to manage this, but I have noticed that elements with tabindex display an outline both when clicked and when focu ...

When deployed, Angular 14 and Bootsrap 5 are functioning properly on a local environment but encountering issues on an online

My Angular application (version 14.2.0) is integrated with bootstrap (version 5.2.3). Upon building and deploying the application on a local IIS server, everything displays correctly as shown in the image below: https://i.sstatic.net/pLDs6.jpg However, w ...

Twitter Bootstrap 3 Carousel now showcasing a pair of images simultaneously instead of three

Can this carousel be configured to show just 2 pictures at a time instead of 3? Check out the live demo here. I've attempted adjusting the columns to col-md-6 and the CSS to 50%, but haven't had any success... ...

Having trouble with Jquery not applying or removing the selected class in the navigation menu

My website is built using PHP, with the index file dynamically loading pages from a folder named "pages." Additionally, I have the navigation menu stored in a separate file. I am attempting to highlight the text color when a link is clicked, but I am faci ...

What do you do when you need to hide a table column that has a colspan

I have been searching for a solution to my unique table structure, but I haven't found any that match my situation. When attempting to hide column A or B, the following code works perfectly: $('table td:nth-child(1),table th:nth-child(1)') ...

Tips for rotating individual letters within a sentence on popular web browsers, including Chrome

Can you make a sentence appear with each individual letter rotating and getting larger? This is my approach: I decided to split the sentence into separate span elements, one for each letter. Then I used CSS transform -webkit-transform to animate the lette ...

Creating Personalized Checkboxes for Internet Explorer Versions 7 and 8

I am currently in the process of implementing custom checkboxes for my website. Everything is functioning smoothly on browsers such as IE9 and other modern ones. However, I am encountering issues with IE8 and 7. Below is a snippet of my CSS code: input[typ ...

Tips for prolonging the visibility of the Bootstrap 5 Toast alert

Within my HTML code, I have defined a toast element: <div class="position-fixed top-0 start-50 translate-middle-x" style="z-index: 9999"> <div id="errNeutralAlreadyExists" class="toast fade bg-solid-white&quo ...

Having difficulty including text in the website header

I'm struggling to add text on the right side of my header. I have placed small images on the right side of the header, slightly below, and now I want to insert some text above them but I can't seem to get it to work. This is what I'm trying ...

Different style sheets & Susy: Tailored designs for varying orientations

I have the task of designing two layouts - one for Landscape and one for Portrait. The Landscape layout needs wider columns. I am utilizing the latest version of Susy to accomplish this. Below is the code snippet I have written: /* iPads (landscape) ---- ...

How can I achieve both horizontal and vertical centering simultaneously?

UPDATE: Seeking advice on aligning a rangeslider and its label vertically within the same row. The goal is to have them centered with respect to each other while ensuring the rangeslider takes up all available space. How can I vertically center a floatin ...

What is the best way to achieve a precision of 6 decimal places in JavaScript when working with decimals?

While working on coding to round numbers to six decimal places after performing some arithmetic operations, I encountered a problem. I was iterating through the elements of an array and conducting calculations based on the array contents. To achieve roundi ...

Using source mapping with sass-loader and postcss-loader in a Webpack configuration

I am currently attempting to activate sourceMaps in webpack, but I am encountering an issue with the combination of sass-loader and postcss-loader. When both sass-loader and postcss-loader are enabled, my console displays "no source": https://i.sstatic.n ...

Navigating between tabs on Android (Chrome) using Appium/Selenium within the crossbrowsertesting platform

Currently, I am utilizing the crossbrowsertesting platform on Android Chrome and encountering a challenge. The issue I am facing involves clicking on a link that opens up in a new tab. My objective is to switch to this new tab and retrieve its URL; however ...

What is the method for configuring automatic text color in CKEditor?

https://i.sstatic.net/yEM3p.png Is there a way to change the default text color of CKEditor from #333333 to #000000? I have attempted to modify the contents.css in the plugin folder: body { /* Font */ font-family: sans-serif, Arial, Verdana, "Tr ...

Is the menu not appearing in the header section of the HTML/CSS?

Hey there, I'm a new student diving into the world of HTML/CSS. I've been working on creating a page layout, but for some reason my menu links are appearing under the header section instead of within it. I'm a bit confused and could really u ...

The functionality of jQuery animation appears to fail upon the second attempt

Can you tell me why, in THIS CODE, the "I" button at the bottom right works perfectly the first time, but on the second click it only shows a pink background? (function(){ 'use strict'; var $mainButton = $(".main-button"), $closeBut ...

Guide on creating a hover-based side menu

I am looking to enhance the sub-menus like PRODUCT 1, PRODUCT 2, etc. by adding side menus that appear when hovering over them. Can anyone assist with implementing this feature in the code below? Below is the current code snippet: CSS: @import url(http: ...