0

It is possible to change the icon of a date type input, maybe insert one an image link. I would like the icon to be on the left like now

<style>
  input[type="date"]::-webkit-calendar-picker-indicator {
      color: rgba(0, 0, 0, 0);
      opacity: 1;
      display: block;
      background-repeat:  no-repeat;
      width: 25px;
      height: 25px;
      border-width: thin
  }
  input[type="date"]::-webkit-calendar-picker-indicator {
      position: absolute;
      left: 10%;

  }
  input::-webkit-datetime-edit-fields-wrapper {
      position: relative;
      left: 20%;
  }
  input::-webkit-datetime-edit {
      position: relative;
      left: 20%;
  }

  .sd-container {
    position: relative;
    float: left;
  }

  .sd {
    padding: 5px 10px;
    height: 30px;
    width: 150px;
  }

</style>

<form>
    <div class="sd-container">
      <input class="sd" type="date" name="selected_date" 
id="date" />
    </div>
</form>
  1. Edit the icon
  2. Change the calendar icon

0 Answers0