Search code examples
javascripthtmlcssplaceholder

Is it possible to make the placeholder attribute of an input element remain the same even after entering a value

In the website I am making, I am styling the placeholder attribute of the input element to translate upwards. I was wondering if it possible to keep the placeholder attribute the same even after entering text in the element.

This is my CSS

.inputbox {
    height: 40px;
    padding-top: 5px;
    border-style: none none double none;
    border-color: rgb(117, 117, 117);
    width: 200px;
    outline: none;
    transition: border-color 0.3s;
}

.inputbox:focus {
    border-color: #111;
}

.inputbox::placeholder {
    transition: all 0.3s;
}

.inputbox:focus::placeholder {
    transform: translateY(-20px);
    color: #111;
    transition: all 0.3s;
}
Solution

  • I don't think it's possible to keep the placeholder attribute after inputting some text. The best way I could work through it was to use the <label> tag.