How to put a constant placeholder in the top left corner of the input?

Question

I have an Input component (by antd) that I want to design is such a way that the placeholder text will be always constant, small, and in the top left corner of the component.

I currently have managed to put it the left top corner, but not the constant part:

const MyInput = styled(Input)`
  ::placeholder {
    font-size: 14px;
    width: 200px;
    position: absolute;
    pointer-events: none;
    left: 4px;
    top: 0px;
  }
  height: 50px;
`;

<MyInput style={{ width: "50vw" }} placeholder={"name here"} />

Maybe this would answer your question - https://stackoverflow.com/questions/26324252/html-keep-placeholder-when-user-types — Dean James, Sep 22 '22 at 12:27
You probably need to use something other than placeholder: the placeholder disappears once a user has entered a value in the input. Perhaps try absolutely positioning a ` `element over the input instead. — Terry, Sep 25 '22 at 16:03

score 1 · Answer 1 · answered Sep 25 '22 at 20:50

i made something with position absolute, not sure if this is what you want

       .inputContainer {
            width:200px;
        }
        .inputContainer input {
            color: black;
            width:200px;
            padding-top:15px;
            height:25px;
            border:1px solid black;
            border-radius:5px
        }
        .soCalledPlaceholder {
            color: gray;
            position: absolute;
            left: 10px;
            top: 10px;
        }

 <div class="inputContainer">
        <input type="text">
        <div class="soCalledPlaceholder">
            Iam a Placeholder
        </div>
    </div>

score 0 · Accepted Answer · answered Sep 28 '22 at 09:05

after more search I figured that @Terry was right, and the answer was to use a label tag instead of a placeholder,

so after some digging into stackoverflow I found the post (Floating labels using React and Ant Design)

and played with the code a bit to create this one -

const FloatLabel = ({ children, labelText }) => {
  const labelStyle = {
top: 2,
fontSize: 10,
fontWeight: "normal",
position: "absolute",
pointerEvents: "none",
left: 12,
transition: "0.2s ease all"
};

 return (
<div style={{ position: "relative", marginBottom: 12 }}>
  {children}
  <label style={labelStyle}>{labelText}</label>
</div>

); };

How to put a constant placeholder in the top left corner of the input?

2 Answers2