0

I'm trying to customize standard web-kit input type="date" element. I'm stuck trying to remove or assign new proper style to :before element so it would disappear or become invisible.

I'm simply trying to make "select date" text go away and show native date picker output in control field when user clicks on it.

Thanks in advance!

$(document).ready(function(){
    $("input[type=date]").click(function(){
        $("input[type=date]::-webkit-calendar-picker-indicator:before").css("display", "none");
    })    
})
input[type=date] {
 height: 46px;
 width: 196px;
 font-size: 16pt;
 /*text-transform: uppercase;*/
 background-color: #f1f5f8;
 border: 2px solid #d7d6d5;
    border-radius: 8px;
 color: #555555;
 padding: 0 15px;
}

input::-webkit-inner-spin-button { display: none;}

input[type=date]::-webkit-calendar-picker-indicator {
  color: #555555;
  opacity: 1;
  position: relative;
}

input[type=date]::-webkit-calendar-picker-indicator:after {
  content: "\e906";
  font-family: 'icomoon';
  font-size: 26px;
  background: #f1f5f8;
  width: 44px; height: 24px;
  text-align: right;
  left: -10px; top: -4px;
  position: absolute;
}

input[type=date]::-webkit-calendar-picker-indicator:before{
    content: "Select date";
    width: 160px; height: 30px;
    left: -180px; top: -5px;
    background: red;
    position: absolute;
    text-align: left;
}

input[type=date]::-webkit-calendar-picker-indicator:before hidden{
    background: green;
}

input[type=date]::-webkit-clear-button { /* Removes blue cross */
  -webkit-appearance: none;
  margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id="datepic" name="depart" placeholder="Select date">
tillinberlin
  • 429
  • 4
  • 14
Yevhen
  • 75
  • 1
  • 8

1 Answers1

0

The short answer is NO!

The pseudo selector :before is not accessible via javascript.

But a workaround is this to add a class name in js/jQuery and use the :before selector to hide it in the css like:

in the css you can do this: 

input[type=date].addedDate::-webkit-calendar-picker-indicator:before{
   display:none;
}

and in the js/jQuery: 

$("input[type=date]").click(function(){
    $("input[type=date]").addClass("addedDate");
})


$(document).ready(function(){
    $("input[type=date]").click(function(){
        $("input[type=date]").addClass("addedDate");
    })    
})
input[type=date] {
 height: 46px;
 width: 196px;
 font-size: 16pt;
 /*text-transform: uppercase;*/
 background-color: #f1f5f8;
 border: 2px solid #d7d6d5;
    border-radius: 8px;
 color: #555555;
 padding: 0 15px;
}



input::-webkit-inner-spin-button { display: none;}

input[type=date]::-webkit-calendar-picker-indicator {
  color: #555555;
  opacity: 1;
  position: relative;
}

input[type=date]::-webkit-calendar-picker-indicator:after {
  content: "\e906";
  font-family: 'icomoon';
  font-size: 26px;
  background: #f1f5f8;
  width: 44px; height: 24px;
  text-align: right;
  left: -10px; top: -4px;
  position: absolute;
}

input[type=date]::-webkit-calendar-picker-indicator:before{
    content: "Select date";
    width: 160px; height: 30px;
    left: -180px; top: -5px;
    background: red;
    position: absolute;
    text-align: left;
}

input[type=date]::-webkit-calendar-picker-indicator:before hidden{
    background: green;
}

input[type=date]::-webkit-clear-button { /* Removes blue cross */
  -webkit-appearance: none;
  margin: 0;
}

input[type=date].addedDate::-webkit-calendar-picker-indicator:before{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id="datepic" name="depart" placeholder="Select date">
Jai
  • 74,255
  • 12
  • 74
  • 103