css - how to change position of input placeholder [duplicate]

Question

I want to put input placeholder on input border.

I manage to change color but not location.

.filter::placeholder {
   color: gray;
}

<input type="text" class="filter">

Is there a way to do it?

Answer 1

You can't do this by styling the ::placeholder, it only supports a limited number of styles: https://css-tricks.com/almanac/selectors/p/placeholder/#article-header-id-4

You can add a span that achieves a similar effect however.

.filter {
  position: relative;
  width: 195px;
  height: 30px;
  border-radius: 5px;
  outline: none;
  padding: 5px;
  border: 1px solid lightblue;
}

.placeholder {
  position: absolute;
  left: 20px;
  top: 0px;
  background-color: white;
  padding: 0 20px;
}

.filter:focus ~ .placeholder,
.filter:valid ~ .placeholder {
  display: none;
}

<input required type="text" class="filter" />
<span class="placeholder">First Name..</span>

Answer 2

A more semantically correct approach would be to use labels instead of spans.

.group{
  position:relative;
}
.group>label{
  padding:0 0.2em;
  position:absolute;
  top:-0.5em;
  left:1em;
  background-color:white;
}

.group>input{
  padding:0.8em;
  border-radius: 0.5em;
  border: 2px solid lightblue;
  outline:none;
}

<form>
    <div class="group">
         <label>First name</label>
         <input type="text" class="">
    </div>
</form>