What are some methods for customizing the calendar icon displayed in an input field with type date?

Is there a way to customize the calendar logo without relying on jquery?

The desired appearance should resemble the image shown below:

https://i.sstatic.net/G06iZ.png

 input
 {
        width: 50%;
        padding: 8px;
        border-radius: 10px;
        margin-bottom: 5%;
        border: 1px solid #CCCCCC;
        font-size: 13px;
    }
  
  
  
  .fecha input[type="date"]::-webkit-calendar-picker-indicator
  
    {
        color: rgba(0, 0, 0, 0);
        opacity: 1;
        background-image: url("./../some-folder/some-file.svg");
        background-repeat: no-repeat;
        background-position: 100% center;
        background-size: 20px;
        cursor: pointer;
    }
<div class="form-row fecha">
       <div class="col-12">
         <input placeholder="Fecha de Inicio"  type="text" onfocus="  (this.type='date')" onblur="(this.type='text')">
         </div>

However, the current styling does not match the intended look of the image.

I am using bootstrap4 (without Jquery) and sass in this project.

htmlcsssassbootstrap-4

Answer №1

/* Custom styles for the search box */

.main {
    width: 50%;
    margin: 50px auto;
}

/* Styling for Bootstrap 4 text input with search icon */

.has-search .form-control {
    padding-left: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #000;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Include Bootstrap CSS and Font Awesome Icons -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">



    <title>Hello, world!</title>
  </head>
  <body>
  <div class="row">
  <div class="col-6">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="">
    <div class="input-group-append">
      <button class="btn btn-secondary" type="button">
     <i class="fa fa-calendar" aria-hidden="true"></i>
      </button>
    </div>
  </div>
  </div>
  </div>
  
  <br>
  <p>Another way without using custom css</p>
  <!--Alternative method-->
  <div class="row">
  <div class="col-6">
   <div class="input-group mb-2 mr-sm-2">
   <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
    <div class="input-group-append">
     <i class="input-group-text fa fa-calendar" aria-hidden="true"></i>
     
    </div>
    
  </div>
  </div>
  </div>

  
  

    <!-- Optional JavaScript -->
    <!-- Load jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Feel free to explore the above code implementation for assistance.

Answer №2

What do you think of this solution? I utilized an image found through a Google search, but you would substitute it with your own. The image is absolutely positioned on the right side of the text input. As soon as the input switches to type="date", the image disappears.

input {
  width: 50%;
  padding: 8px;
  border-radius: 10px;
  margin-bottom: 5%;
  border: 1px solid #CCCCCC;
  font-size: 13px;
}

.fecha input[type="date"]::-webkit-calendar-picker-indicator {
  color: rgba(0, 0, 0, 0);
  position: relative;
  opacity: 1;
  cursor: pointer;
}
    
.calendar {
  position: absolute;
  right: 50%;
  top: 12px;
}
input[type="date"] + .calendar {
  display: none;
}
<div class="form-row fecha">
  <div class="col-12">
    <input placeholder="Fecha de Inicio"  type="text" onfocus="  (this.type='date')" onblur="(this.type='text')">
   <img class="calendar" src="https://freeiconshop.com/wp-content/uploads/edd/calendar-solid.png" height="24" width="24" />
  </div>
</div>

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

jquery script that retrieves the href attribute of the anchor tag located near the button that is currently being clicked

Hello there! I am trying to extract the href of a link when the button next to it is clicked by the user. However, the challenge is that there are multiple buttons and links on the page. For example, if the first button is clicked, I want to display "www. ...

javascriptjquerycss

What is the best way to arrange a number of inline-block elements with equal size in a vertical alignment?

My goal is to display a set number of items in a container, all with the same fixed size. The challenge arises when the content of each item varies in length, causing misalignment vertically: .child { display: inline-block; background: #bbbbbb; marg ...

htmlcssflexbox

CSS selector targeting an element based on the value of its table border

Is there a way to target a table on a webpage using a CSS selector? The table structure looks like this: <table border="1" width="560" cellspacing="0"> <tr> <td height="28" colspan="3" bgcolor="#FFFFF...> </tr> </table ...

jquerycsscss-selectorsjquery-selectors

Dynamic presentation created with Serif software

As a newcomer to web coding and one of the older generation, I recently created a basic .swf slideshow using Serif's graphic software. However, I realized that it does not display on an Apple iPad. You can experience this issue quickly here. My questi ...

javascripthtmlflash

Box with negative z-index cannot be clicked

I am currently facing an issue with a textbox in the center of my screen - when I click on it, no actions are registered. This leads me to believe that there may be a CSS Z-Index problem at play here. How can I troubleshoot and correct this issue effective ...

cssz-index

Chronological Overview (Highcharts)

Can you customize a timeline in Highcharts to resemble the image? https://i.sstatic.net/5Lipu.png I have a functional example of the timeline I desire, but the color coding and filtering aspects are challenging for me. I am attempting to apply a filter th ...

javascripthtmlcsshighcharts

Avoid receiving input for a button that is being covered by another button

I am currently developing an Idle Game and I am looking to include 'buy buttons' for purchasing buildings, along with a sell button embedded within the buy button. Just as a heads up, these buttons are represented by DIVs acting as buttons. Here ...

javascripthtmlbuttonparent

What specific width range would be best for my needs?

I used to have the default font style of Myriad Pro Light and a padding setting for my main menu on my website as follows: .menu > li > a { padding: 17px 15px 15px 15px; } Recently, I changed the default font style to Montserrat. However, this chang ...

htmlcss

Algorithm that continuously increases a given date by 3 months until it surpasses or matches the specified creation date

I am currently working with QuickBase, a platform that involves HTML. My goal is to develop a code that can take a [fixed date] (always in the past) and increment it by 3 months until the MM/YYYY exceeds or equals the MM/YYYY of the [creation date]. Once t ...

javascripthtmldateif-statementquickbase

What is the best way to position a background image at the top of a div without overlapping the

I have this HTML code: <div class="page"> <div id="header"> ... </div> </div> Below is my CSS: .page { width: 1028px; background-color:#103250; margin-left: auto; margin-right: auto; } ...

htmlcss

Adding the !important rule in React inline CSS effortlessly

Is there a way to include !important in my inline CSS property without disrupting the entire style? import React from "react"; export default class Todo extends React.Component { render() { const {text} = this.props; const cardStyl ...

cssreactjs

How to swap one image for another using jQuery on click

I have a question about updating images on an HTML page using jQuery. Below is the code I am currently using: $(document).ready(function() { $("#img-1").click(function() { var imgsrc = $(this).attr('src'); $(".click-img").attr('s ...

htmljqueryreplace

Automating the process of populating preferredCountries from intl-tel-input with database output

I am looking to dynamically populate the preferredCountries:["xx","yy","zz"] array with a function that retrieves the most frequently used country codes from a MySQL database, listing them in descending order of usage and including those with a count of at ...

javascriptphpdatatablesbootstrap-4intl-tel-input

"Enforce a specific height on a div that is exclusively showing a background

I have been trying to use a div element to showcase a specific color, where the background color acts as the content. However, no matter what height or width settings I input, I am unable to achieve the desired size for the div. Even after experimenting w ...

htmlblazorheight

Creating a continuous loop animation with CSS hover state

This piece of code creates an interesting effect when the text is hovered over. The slight shakiness adds a cool touch to it. However, this effect only occurs when the mouse is moved slowly; if the mouse remains stationary, the hover style takes precedence ...

jqueryhtmlcss

The placement of the floating element completely messes up the

Whenever I try to float an element in my magnificent popup, the layout gets all messed up. You can see for yourself by trying to put the image and text next to each other using "float: left": http://jsfiddle.net/a7Vj8/1/ Every time I attempt to float th ...

htmlcss

Improving code quality and consistency in Javascript: Tips for writing better code

Hey, I've been experimenting with some code using ajax and have ended up with a lot of repetitive lines. Is there a way to streamline the code without losing functionality? I keep using the .done method multiple times when I could probably just use it ...

javascripthtmljquerycss

tips for concealing the shadow of a draggable div during the dragging process

I am facing an issue with a draggable div. When I drag the div, the shadow also moves along with it. I want to find a way to hide this shadow while dragging. <div draggable="true" (dragstart)="mousedown($event)" (drag)="dra ...

javascripthtmlcssangulardraggable

Scrollable Tailwind components

I am working on creating a page layout similar to this design: here is what I want to achieve The goal is to have a simple homepage with a navbar and split screen. The challenge is to prevent the entire page from scrolling normally and enable independent ...

htmlcsstailwind-css

Retrieving form data in Servlet

Just began working with servlets and encountered an issue. I am trying to upload a file to my server using a servlet, while also sending a text value (the file name) to be changed on the server side. The problem arises when I submit the form data to the se ...

javajqueryhtmlajaxservlets