10

I want to put input placeholder on input border.

enter image description here

I manage to change color but not location.

.filter::placeholder {
   color: gray;
}
<input type="text" class="filter">

Is there a way to do it?

VXp
  • 11,598
  • 6
  • 31
  • 46
haya
  • 487
  • 3
  • 7
  • 20
  • 3
    Check this I hope it will be useful for you https://stackoverflow.com/questions/42233488/move-placeholder-above-the-input-on-focus – Ayaz Ali Shah Jan 15 '18 at 10:23
  • 1
    https://css-tricks.com/float-labels-css/, http://bradfrost.com/blog/post/float-label-pattern/, http://adamsilver.io/articles/placeholders-are-problematic/, https://medium.com/simple-human/floating-labels-are-a-bad-idea-82edb64220f6 – CBroe Jan 15 '18 at 10:36
  • A quick Google search gives you [several](https://tympanus.net/codrops/2015/01/08/inspiration-text-input-effects/) [tutorials](https://css-tricks.com/float-labels-css/), [snippets](https://codepen.io/sivan/pen/alKwf) and [questions](https://stackoverflow.com/questions/34552623/html-css-how-to-get-label-inside-form-to-animate) covering this already :o) – agrm Jan 15 '18 at 10:59

2 Answers2

12

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>
Jesse
  • 3,522
  • 6
  • 25
  • 40
  • 1
    Plus, ` – VilleKoo Jan 15 '18 at 10:45
  • 1
    Unfortunately, the issue now is that it reappear when the input is not in focus, should/could implemented using the `required` attribute and `:valid` selector, as explained in the link of the first comment to the question – Alon Eitan Jan 15 '18 at 10:47
  • @Alon Eitan to be fair, it seems the OP needed more of a simple label on top of the input border than a placeholder. Labels are for "name", "email", etc, placeholders for "john doe", "johndoe@somemail.com", etc. Since he put "First Name" in the example, doesn't seem like he wants it to disappear at all. – Facundo Corradini Jan 15 '18 at 10:51
  • 1
    Well, I totally agree with you on that, and the last edit is definitely a valid solution, so have an upvote. Good job – Alon Eitan Jan 15 '18 at 10:52
7

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>
Facundo Corradini
  • 3,825
  • 9
  • 24