Styling a text input as a date input

I want to make a text input that looks like a date input (check the code snippet). I want it to be seamless because how I have it setup now I can’t press backspace to delete the value of the field before it. Is it possible to do it with one textfield? And if not how would I do it with javascript. (I did not include the javascript I already wrote)

Please ask me if I need to clarify anything.

#birthday{
    font-size:13px;
    padding: 5px;
    width:120px;
    border-radius: 8px;
    border-style: solid;
    border-color: RGBA(0,0,0,0.1);
    }
    #birthday-span{
        margin-left: -133px;
        color: RGBA(0,0,0,0.4);
        font-weight: bold;
        font-size: 15px;
        
    }
    .input-birthday{
        font-size: 13px;
        border: 0;
        outline: 0;
        margin: 3px;
        color: black;
    }
    #month,#day{
        width: 25px;
    }
    #year{
        width: 35px;
    }
<input type='text' id='birthday' disabled>
                    <span id='birthday-span'>
                        <input type='text' name='month' id='month' placeholder="MM" maxlength='2' class='input-birthday'>/
                        <input type='text' name='day' id='day' placeholder="DD" maxlength='2' class='input-birthday'>/
                        <input type='text' name='year' id='year' placeholder="YYYY" class='input-birthday' maxlength="4">
                    </span>

1 thought on “Styling a text input as a date input”

  1. Hey! I could have sworn I’ve been to this website before but after reading through some of the post I realized it’s new to me. Anyhow, I’m definitely glad I found it and I’ll be bookmarking and checking back frequently!

    Reply

Leave a Comment