'How to remove arrows on hover of<input type=date> in Chrome [duplicate]

I've created date picker as a button,and when hovering it, it looks messy in chrome browser. may be the reason is only because of its default behavior in browsers but can I change that hover effect on chrome?

Image in Firefox:

Default <input type=date>

enter image description here

Button <input type=date>

enter image description here

Image in Chrome:

Default <input type=date> (when hover)

enter image description here

Button <input type=date> (when hover)

enter image description here

Is there any way to remove that hover effect on Chrome?

.date-picker-button {
  background: #8DBF42;
  color: #fff;
  position: relative;
  cursor: pointer;
  margin-bottom: 10px;
  border: 2px solid #8DBF42;
  font-size: 14px;
  padding: 12px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  width: 300px;
}

.input-group {
  position: relative;
  border: 2px solid #cdd7e1;
  margin-bottom: 10px;
  display: block !important;
  width: 300px;
  border: none;
}

.date-picker-button .date-picker-input {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0;
  background: #8DBF42;
  border: none;
  width: 300px;
  padding-left: 55px;
}

.fa.fa-angle-down {
  float: right;
  color: white;
  font-size: 20px !important;
  font-weight: 600;
  top: 0px !important;
  position: relative;
  margin-right: 20px;
}

.fa-calendar-o {
  color: white !important;
  z-index: 1;
  top: 0px !important;
  position: relative !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="date-picker-button input-group">
  <i class="fa fa-calendar-o" aria-hidden="true"></i>
  <span>Select Date</span>
  <input class="input-startdate date-picker-input hasDatepicker" name="effdate" id="dp1523936970319" aria-required="true" required="" type="date">
  <i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
htmlcssgoogle-chromedatepickerfont-awesome


Solution 1:[1]

Try this, it will hide everything:

input#myInput::-webkit-calendar-picker-indicator { display: none }

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

Solution 2:[2]

This is working to hide the input buttons: 

::-webkit-inner-spin-button,
::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}
<input type="date"  id="myInput">

Solution 3:[3]

You can follow this answer: Method to show native datepicker in Chrome which shows how you can stretch the arrow across the entire input, which then allows clicking anywhere within the input field to trigger the date picker.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vadim Ovchinnikov
Solution 2 DIDIx13
Solution 3 Ian Devlin

Related Questions