Display a calendar icon in a Bootstrap 4 date input field

I'm not a fan of the way date inputs appear in Bootstrap 4. Currently, they have two states and when you hover over them, three arrows are displayed. One of the arrows opens the calendar.

I would like to replace all of that with just one clickable calendar icon, as shown in the image below(update1: but the calendar should be clickable).

update2: https://jsfiddle.net/wxeg4vk7/

<input type="date" class="form-control" id="pickupdate">

Is there a way that I can achieve this?

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

Many thanks!

cssbootstrap-4

Answer №1

Begin by concealing the default html5 date spinners. Modify the color and position of the date picker-indicator... 

.form-control[type=date]::-webkit-inner-spin-button, 
.form-control[type=date]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}   

input[type=date]::-webkit-calendar-picker-indicator {
    color: rgba(0,0,0,0);
    background-color: rgba(0,0,0,0);
    z-index: -1;
    position: relative;
    transform: translateX(16px);
}

Lastly, incorporate an input-group...

<div class="input-group">
   <input class="form-control py-2 border-right-0 border" type="date">
   <span class="input-group-append ml-n1">
     <div class="input-group-text bg-transparent"><i class="fa fa-calendar-alt"></i></div>
   </span>
</div>

https://codeply.com/p/22Kp9X4CAD

Answer №2

To eliminate the up/down arrows, you can apply this custom CSS:

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

You can also check out a Bootstrap 4 example here: https://codepen.io/fraktar/pen/jObWwdz

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

Is it possible for a dropdown to span 100% of the width

http://jsfiddle.net/gL1xynzr/ Is there a way to style a dropdown menu with the following properties: width: 100%; max-width: 440px; I am planning to include 4 of these dropdowns in one CSS table row to ensure they fit horizontally on mobile phone portra ...

csshtmlsemantic-ui

Using HTML and CSS, create a layout with three columns where the side columns are flexible in width and the middle

Currently, I am facing an issue with the header design of my website. The layout consists of 3 columns of divs and my goal is to have a middle column with a fixed width of 980px. In addition, I want the left side of the header to span across the entire bro ...

htmlcsswidthfill

My goal is to conceal an image and reveal text instead when hovering over it

I'd like to achieve a hover effect on my image where the text appears in place of the image, without using jQuery or JavaScript. #content .description { position: relative; bottom: 30px; left: 0px; display: none; } #content:hover .descripti ...

htmlcss

Is there a way to move a floated element below another floated element?

jsfiddle: http://jsfiddle.net/PTSkR/195/ I'm attempting to keep the small blue box snugly in the corner, positioned below the red box and to the right of the large blue box. How can this positioning be accomplished? CSS: .floated{ background-c ...

css

Why won't Firefox display images on my website?

Currently facing an issue with a website I am designing using HTML/CSS (design only). When I open it in Firefox from my hard drive, no images are displayed - instead, there is a small icon indicating that the picture could not be loaded. However, if I righ ...

htmlcssfirefox

Adjust the checkmark color of MUI Checkbox

When using Material UI's MUI library for React, I encountered an issue with the checkbox checkmark color. By default, the checkmark takes on the background color of the container element, which is great for light backgrounds but not ideal for dark one ...

cssreactjscheckboxmaterial-ui

When hovering over a thumbnail, create a transition effect on both the thumbnail itself and the associated H

I've been struggling with this problem for a few days now. My goal is to achieve a similar effect to what is on this website: I want to highlight a link when the mouse hovers over a thumbnail, with a transition effect. I think it has something to do ...

jqueryhtmlcsscss-transitions

Using Bootstrap 5 to beautifully wrap an even quantity of boxes

My challenge is to optimize the spacing between 4 boxes based on screen size: The layout should adjust as follows: If it's xxl or larger, all 4 boxes should be in a single horizontal row. If it's md or larger, two boxes should be in the firs ...

cssbootstrap-4bootstrap-5

Trouble with displaying mobile CSS correctly

Take a look at this image and screenshot. Whenever the link is selected, hovered over or clicked on, a blue background appears on this mobile site. I have already included the CSS code below. The CSS code works fine in desktop browsers but not in mobile ...

javascriptjqueryhtmlcss

Customize the background color of each item in an Ionic framework list

Is there a way to create a different background color for each list item using Ionic? For instance, if the list includes fruits like banana, apple, and orange, can we set the background color to yellow for banana, green for apple, and so on? I've att ...

cssbackground-colorionic-framework

Optimizing responsive layouts with Boostrap and maximizing cell widths

Here is the code snippet I am working with: <div class="container-fluid"> <div class="row"> <div class="col-lg-1">Description MKT</div> <div class="col-lg-11> <!-- ... --> </di ...

htmlbootstrap-4

Disabled screen rotation -> hidden background

I tried implementing a media query to "lock" the orientation on my mobile site, but unfortunately, my background image isn't displaying at all. After adding the media query, I included my stylesheet using the link: CSS body { padding:0; marg ...

htmljquerycssmobilejquery-mobile

Setting the z-index for a JavaScript plugin

I need help with embedding the LinkedIn plugin into a website that has stacked images using z-index for layout. I have tried assigning the plugin to a CSS class with a z-index and position properties, but it hasn't worked as expected. Can anyone sugge ...

javascripthtmlcsspluginsz-index

Simultaneous fading and displaying of the navbar

Currently, I'm in the process of constructing a navigation bar using Bootstrap v4 and have encountered an issue with the collapsing animation in responsive view. Upon inspection of the specific navigation bar, I noticed that the classes (.in and .s ...

javascripthtmlcssbootstrap-4

Heading made of ribbon without increasing the scrolling space

Incorporating a unique ribbon-style heading that stretches out from the content area on both sides to create a 3D effect using an image background without relying on CSS3 techniques. I experimented with floating elements, negative margins, and relative po ...

cssheaderscrollbarribbonviewport

Revealing CSS elements moving from the left to the right

On my website, I have implemented two different menu bars. The first one, in black, stays fixed at the top of the page. The second one, in orange, becomes sticky once it reaches the black bar. At the same time, a small logo image is revealed, previously hi ...

jqueryhtmlcss

Troubleshooting a CSS overflow problem in the main slider

While exploring the website , I encountered a minor issue. When I added "overflow: hidden" to the featured slider div, the images appeared stacked if JavaScript was enabled or the user's internet connection was slow. However, a new problem has arisen ...

htmlcssoverflow

My custom fonts in CSS are being truncated at the bottom, specifically the descenders like "g" and "y"

I am struggling to understand why certain letters, like 'g' and 'y', are being cut off when they drop below the line in my paragraph. I have tried adjusting the line height, experimenting with different font sizes in pixels, points, and ...

htmlcss

Displaying content in Bootstrap 5 modal with jQuery may cause a delay in the appearance of a centered spinner before the content loads

In my Bootstrap 5 modal, I have implemented specific functionality in jQuery where a centered spinner is supposed to show up in the modal before loading the content. You can see a live example of this here. The issue I am facing is that the spinner takes ...

javascriptjquerycssbootstrap-5

Focus on selecting a div nested within a separate component

I have encountered an issue with an imported component that has multiple nested divs which I am unable to modify. Deep within these divs, I need to apply a bottom margin. While using Chrome DevTools, I managed to add the desired margin to one of the div ...

htmlcssreactjs