skip to Main Content

Basically i want to give some transition to input by padding bottom placeholders on focus, but it’s not working

   transition: padding-bottom 0.3s;
.formInput:focus::placeholder {
  padding-bottom: 100px !important;

I can give it a color and it will change on focus, but padding-bottom is not working, neither margin



  1. When working with placeholder text in input elements, CSS properties like padding-bottom and margin don’t apply directly to the ::placeholder pseudo-element. This is because the ::placeholder pseudo-element is not designed to handle layout properties in the same way as other elements.

    However, if you still want to move the ::placeholder pseudo-element:

    .formInput::placeholder {
      transition: transform 0.3s;/* smooth transition of placeholder when focused */
    .formInput:focus::placeholder {
      transform: translateY(100%);/* to move up */
    Login or Signup to reply.
  2. Being a pseudo element, you can just move the placeholder around.

    Your best bet is to simulate a placeholder.

    I did this once, and it just works !

    .text-field {
        position: relative;
        margin-bottom: 10px;
        place-self: center;
    .text-field input {
        outline: none;
        border: none;
        border-bottom: var(--border-color) 2px solid;
        /* border-radius: 5px; */
        padding: 9px 0px;
        margin-top: 0;
        width: 100%;
        font-size: 100%;
        color: var(--text-color);
        background-color: transparent;
    .placeholder {
        position: absolute;
        margin: 17px 0;
        color:  var(--text-color);
        display: flex;
        align-items: center;
        top: -6px;
        /* left: 17px; */
        transition: all 0.2s;
        transform-origin: 0% 0%;
        pointer-events: none;
    .text-field input:focus + .placeholder,
    .text-field input:not(:placeholder-shown) + .placeholder {
        transform: scale(0.8) translateY(-23px) translateX(0px);
        /* background-color: transparent; */
    .text-field input:focus{
        color: var(--text-color);
        border-color: var(--selected-color);
    .text-field input:focus + .placeholder {
        color: var(--text-color);

    For the following HTML :

                    <div class="text-field">
                        <input type="password" name="pwd" value="" placeholder=" ">Actual Placeholder</span>
                        <p class="error-text"></p>

    Of course, adapt it to your use case, and tell me if it doesn’t work, because it does on my side, so I probably forgot to send a bit !

    Kind regards

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top