3

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>
Khushbu Vaghela
  • 609
  • 2
  • 5
  • 18
  • 1
    Have you seen this already? https://stackoverflow.com/questions/22909969/styling-inputtype-date-in-chrome – Magd Kudama Apr 25 '18 at 07:01
  • 3
    Can you add your css styles? – benams Apr 25 '18 at 07:04
  • @benams I've posted the css please have a look – Khushbu Vaghela Apr 25 '18 at 07:33
  • 1
    Boostrap offers customisation for date pickers. You can find the documentation with the following link: https://eonasdan.github.io/bootstrap-datetimepicker/. I've used this in a few of my web applications and it works across IE, Edge and Chrome. – slee423 Apr 25 '18 at 07:51
  • 1
    Changing how clicking works is behaviour, not appearance. Unfortunately, it's very unlikely that you'll have cross browser way of changing behaviour on standard ``. So it's better to tweak some 3rd party implementation like bootstrap, jQuery UI etc. – Vadim Ovchinnikov Apr 25 '18 at 08:26

3 Answers3

6

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; 
}
Vadim Ovchinnikov
  • 13,327
  • 5
  • 62
  • 90
Delowar Hosain
  • 2,214
  • 4
  • 18
  • 35
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">
Didix
  • 567
  • 1
  • 7
  • 26
Andrei Todorut
  • 4,260
  • 2
  • 17
  • 28
1

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.

Ian Devlin
  • 18,534
  • 6
  • 55
  • 73