Html Question posted in
Some basic documentation can be found here.

Html – give margin/padding to placeholder on input focus

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

.formInput{
   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

Tags:

2

Answers


  1. 0

    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. 0

    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>
                </div>

    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
Search