Solution 1 :

This is called Input masking. This is a simple code with which you can mask the input without jQuery or any other plugin. The JS file takes very less space compared to other plugins. Refer here for more details.

  font-family: monospace;
outline: none;
label {
  display: inline;
div {
  margin: 0 0 1rem 0;

.shell {
  position: relative;
  line-height: 1; }
  .shell span {
    position: absolute;
    left: 3px;
    top: 1px;
    color: #ccc;
    pointer-events: none;
    z-index: -1; }
.shell span i {
      font-style: normal;
      /* any of these 3 will work */
      color: transparent;
      opacity: 0;
      visibility: hidden; }

.shell span {
  font-size: 16px;
  font-family: monospace;
  padding-right: 10px;
  background-color: transparent;
  text-transform: uppercase; }
<script src="" data-autoinit="true"></script>

<label for="cc">Expiry Date:</label>
<input id="cc" type="text" placeholder="MM/YY" class="masked" pattern="(1[0-2]|0[1-9])/(1[5-9]|2d)" data-valid-example="05/18"/>

Problem :

i am using input[type=’month’] to get expiration date from user. it usually appears like this:
[![enter image description here][1]][1]

I want to show to the user like this: [![enter image description here][2]][2]

Can this be achieved?