Change date input triangle to an icon - HTML CSS CSS Form

HTML CSS examples for CSS Form:input

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input

Description

Change date input triangle to an icon

Demo Code

ResultView the demo in separate window 

<!--<!-- w w  w  . j a v a2  s .  c o  m-->
Created using JS Bin
http://jsbin.com
Released under the MIT license: http://jsbin.mit-license.org
-->
<html>
 <head> 
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
  <style>
::-webkit-calendar-picker-indicator {
   color:Chartreuse;
   opacity:2;
}

::-webkit-calendar-picker-indicator::after {
   content:'';
   display:block;
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat;
   background-size:11%;
   width:100px;
   height:100px;
   position:absolute;
   transform:translateX(-3%);
}
</style> 
 </head> 
 <body> 
  <input type="date" class="date">  
 </body>
</html>

Related Tutorials