What is the best way to adjust the location of the date picker or calendar icon in an HTML and CSS setup, without relying on

Currently, I am using a date picker with the calendar icon placed on the right side of the input field by default. However, I would like to move the calendar icon to the beginning of the input field. Despite my efforts to change it, I have not been successful in finding the correct property to make this adjustment. If anyone could assist me in making this change, I would greatly appreciate it! You can view how it looks currently here. Below is the code I have been using:

 <input class="input-field date" type="date" placeholder="Date and Time">

htmlcss

Answer №1

.custom-input{
    height: calc(1.5em + 1rem + 2px);
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
    display: block;
    width: 40%;
    font-weight: 400;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 2px solid black;

}

input[type="date"]::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background-repeat:  no-repeat;
    width: 25px;
    height: 25px;
    border-width: thin
}
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 5%;
}
input::-webkit-datetime-edit-fields-wrapper {
    position: relative;
    left: 10%;
}
input::-webkit-datetime-edit {
    position: relative;
    left: 10%;
}
 <input class="custom-input date" type="date" placeholder="Select Date and Time">

Answer №2

input[type="date"]::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background: url(/*yourURLHere*/) no-repeat;
    width: 25px;
    height: 25px;
    border-width: thin
}
<input class="input-field date" type="date" placeholder="Date and Time">

Answer №3

To customize the appearance of an input with type "date", you can follow these steps:

 // Customizing the picker icon
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 1;
    display: block;
    background-repeat:  no-repeat;
    width: 24px;
    height: 24px;
    position: absolute;
    left: -20%;
}

// Adjusting the input field container and date text
input::-webkit-datetime-edit-fields-wrapper {
    position: relative;
    left: 5%;
}
input::-webkit-datetime-edit {
    position: relative;
    left: 5%;
}

 <input class="input-field date" type="date" placeholder="Current Date">

If you want to change the default icon, you can select a different one from and update the code accordingly:

// Example of changing the icon to 'clock-outline' from https://materialdesignicons.com/

input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 1;
    display: block;
    background: 'mdi mdi-24px mdi-clock-outline' no-repeat;
    width: 24px;
    height: 24px;
    position: absolute;
    left: -20%;
}

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

Styling elements with CSS

I've been attempting to align a button to the right of another button. The example above illustrates what I'm trying to achieve. I used Bootstrap to build it, which has a useful navbar feature for layout. However, despite my efforts to use right ...

javascripthtmlcss

Instructions on how to activate scrolling for a div element that becomes visible upon clicking a button

When a button in the navbar is clicked, a div appears with a height that exceeds the viewport/page size. How can I enable scrolling for the entire page when this happens? I attempted to use overflow: scroll, but it only applied scrolling to the internal d ...

javascriptjqueryhtmlcss

When I apply properties in JavaScript, I find that I am unable to utilize the CSS "hover" feature

For a personal project I am currently working on, I decided to experiment with setting background colors using Javascript. However, I have encountered an issue where my CSS code that changes the hover property does not seem to work after implementing the J ...

javascriptcss

Step-by-step guide on achieving a radiant glow effect using React Native

I am looking to add a glowing animation effect to both my button and image elements in React Native. Is there a specific animation technique or library that can help achieve this effect? While I have this CSS style for the glow effect, I am uncertain if ...

javascriptcssreactjsreact-nativecss-animations

Trouble with CSS3 Perspective rendering issue

Here's a simple example showcasing the use of CSS3 Perspective property to create a 3D side flip effect. However, this basic demonstration does not seem to achieve the desired outcome. <html> <head> <style> .div1{height:300px; ...

htmlcss

How can I use JQuery to enable or disable checkboxes upon loading?

I am looking to implement a feature where the checkboxes are enabled when the .group is checked and disabled when it is unchecked. Although I can toggle between them, I'm facing difficulty in disabling the unchecked checkbox using the .group. Upon lo ...

javascripthtmljquery

What is the process for altering the active status in pagination?

How can I make the active class in my pagination appear in red? Here's the code snippet I have: In my script.js file: $(".pagination").append("<li class='page-item' id='previous-page'><a class='page-li ...

javascriptjquerycsspaginationanchor

Collapsing one tab when another is selected in the accordion interface

I have successfully implemented an accordion feature, but I am facing an issue where the tabs do not close when another one is clicked. Currently, they only open but fail to close the previously opened tab... Below is the code snippet for reference: < ...

jqueryhtmlaccordion

What is causing the data element to remain unchanged within a Vue.js function and what steps can be taken to ensure its value can be updated?

Using the axios API in the created() function, I am able to access webURLs. When a mouseover event triggers a v-for handler in the HTML file, the index is obtained and assigned to the selectedState data element. Although the value of selectedState changes ...

javascripthtmlvue.js

Is there a way to extract and exhibit the text from an image using Python?

Could someone assist me in extracting only the text within the highlighted red area? I have been experimenting with Python but haven't been successful in achieving this. My goal is to create a script that prompts for an address, then opens Firefox (or ...

htmlpython-3.xseleniumtextdisplay

Problem with translating a variable into a selector in JQuery

When attempting to make my Jquery code more flexible, I decided to extract the selector and access it through a variable. However, despite creating variables for both selectors, neither of them seem to be functioning properly. I am confident that the issue ...

javascriptjqueryhtmlcss

Encountering difficulties triggering the click event in a JavaScript file

Here is the example of HTML code: <input type="button" id="abc" name="TechSupport_PartsOrder" value="Open Editor" /> This is the jQuery Code: $('#abc').click(function () { alert('x'); }); But when I move this jQuery code to a ...

javascriptjqueryhtml

Incorporating JavaScript to dynamically load an HTML page into an iframe

I am attempting to have each option load a unique page within a frame <!DOCTYPE html> <html> <head> <script> function selectCountry() { var mylist=document.getElementById("country"); document.getElementById("frame").src=mylist.opti ...

javascripthtmliframe

Show the textbox automatically when the checkbox is selected, otherwise keep the textbox hidden

Is it possible to display a textbox in javascript when a checkbox is already checked onLoad? And then hide the textbox if the checkbox is not checked onLoad? ...

javascripthtmlcsstypescript

Update Input field by eliminating white spaces using jQuery version 3.2.1

I am currently developing an HTML/PHP form for user registration. Using the code below, I have managed to prevent any blank spaces from appearing in the input field: <!DOCTYPE html> <html> <head> <script> function stripspaces( ...

javascriptjqueryhtml

Creating a rotating wheel using JavaScript that is activated by a key press event

I need some help with implementing a keystroke event in this code so that the spinning wheel can start based on a key press, like the spacebar. Any suggestions on how to achieve this? I have found an event code for keystrokes in JavaScript: document.body. ...

javascripthtml

My element's padding being overlooked by Tailwind CSS

In the process of developing a comment/response mechanism through MPTT, I am utilizing indentation to clearly designate replies and their respective levels. The comment.level attribute is being employed to establish the padding value. Consequently, a comm ...

htmlcsstailwind-css

Alert Box Displays Variable Name Instead of Label Name in Form Validation - MM_validateForm()

Looking at the screenshot, you can see variable names such as "email_address", "email_message" and "email_subject". I would like these to be displayed as "Email", "Message" and "Subject" instead. The validation in this form is done using MM_validateForm() ...

phpjavascripthtmlwebforms

Error in browser caused by JQuery JavaScript, not Dreamweaver

I need help creating a webpage that can extract and display recent earthquake data based on user input location on Google Maps. I have been using Dreamweaver to test my code, and everything functions perfectly when I use the live webpage feature within th ...

javascriptjqueryhtmlajaxjson

Choose the radio button upon clicking away from the input field

Currently, I have a standard Bootstrap 4 accordion that contains a radio button. Here is the code snippet: <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> ...

htmlcsstwitter-bootstrap