Remove default text/placeholder present in html5 input element of type=date

前端 未结 10 2145
爱一瞬间的悲伤
爱一瞬间的悲伤 2020-11-27 19:32

I am using html input element with type as date,


When I use above element it creates a default date format i.e.

相关标签:
10条回答
  • 2020-11-27 20:06

    this worked fine for me:

    input[type=date]::-webkit-inner-spin-button,
      input[type=date]::-webkit-outer-spin-button {
        -webkit-appearance: none;
      }
    
      input[type=date] {
        -moz-appearance: textfield;
      }
    
    0 讨论(0)
  • 2020-11-27 20:10

    This works for me in chrome as of Version 73.0.3683.103

    ::-webkit-datetime-edit { color: transparent; }
    :focus::-webkit-datetime-edit { color: #000; }
    

    I couldn't figure it out for Edge though so i changed it to this

    input[type=date] { color: transparent !important; } 
    .active input[type=date] { color: inherit !important; }
    

    this may not be good for some of you but i was adding the class of active anyway as my labels hover of the input field until clicked and then i move them up out the way. Hence why i needed to not display the date placeholder while the label was over the input

    0 讨论(0)
  • 2020-11-27 20:15

    The accepted answer doesn't seem to work anymore on latest chrome versions. Tested it on Version 50.0.2661.102 and didn't work.

    Works by adding this instead:

    .mdl-textfield:not(.is-dirty) input::-webkit-datetime-edit {
         color: transparent; 
    }
    
    input:focus::-webkit-datetime-edit {
        color: rgba(255, 255, 255, .46) !important; 
    }
    

    Working sample

    Source

    0 讨论(0)
  • 2020-11-27 20:17
    <input name="date" type="text" onfocus="(this.type='date')" onblur="if(!this.value)this.type='text'">
    

    Thank to Hai Nguyen.

    0 讨论(0)
提交回复
热议问题