CODEWITHSUNDEEP
htmlcssforms
Damian Doman
Damian Doman

Reputation: 532

Horizontaly aligning placeholder in input field

What would be correct approach to aligning placeholder to the top of the field, while input text appearing normally in the middle?

Any way to do that with CSS on input/::placeholder only, or should i rather construct a wrapper with span that would disappear when active and input field below it?

Here's a fiddle of what i've got now: https://jsfiddle.net/ejsLfvdn/1/

And that's what it should look like up to customers will: enter image description here

The input masks are not the case here, i'm only struggling with the placeholder being aligned to the top, while input should appear normally in the middle. The placeholder MUST disappear after filling input.

Upvotes: 0

Views: 75

Answers (4)

Nick Parsons
Nick Parsons

Reputation: 50684

You can use translateY(-100%) on your placeholder to move the text upwards and then give your textbox some padding at the top to reveal the text:

.placeholder-offset {
  font-size: 20px;
  padding-top: 25px;
}

.placeholder-offset::placeholder {
  color: red;
  transform: translateY(-100%);
}
<input type="text" placeholder="Username" class="placeholder-offset" />

Upvotes: 0

user123
user123

Reputation: 443

I hope I achieved what you need.

btw, I used jquery to hide the placeholder while typing and display it again if the field is empty. 

$('.form-control').keyup(function(){
	var val = $(this).val();

  if(val == ""){
    $('.placeholder').show();
  }else{
    $('.placeholder').hide();
  }
});
.input-cont{
  position: relative;
}
.form-control{
  border: 1px solid #DDD;
  border-radius: 5px;
  height: 40px;
  padding-left: 8px;
}
.placeholder{
  position: absolute;
  top: 5px;
  left: 8px;
  color: #3dc185;
  font-size: 12px;
  text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
    <form>
      <div class="input-cont">
        <span class="placeholder">Imię</span>
        <input class="form-control" type="text" name="name">
      </div>
    </form>
  </body>
</html>

Upvotes: 0

James Coyle
James Coyle

Reputation: 10398

You could use something like this with the only issue being the input must have the required attribute.

* {
  box-sizing: border-box;
}

.input {
  display: flex;
  flex-flow: column-reverse nowrap;
  border: 1px solid gray;
  width: 220px;
}

.input input:valid + label {
  opacity: 0;
}

.input input {
  width: 100%;
  padding: 10px;
  border: none;
}
<div class="input">
  <input required id="username" name="username" type="text" />
  <label for="username">Username</label>
</div>

Upvotes: 0

Paddy
Paddy

Reputation: 33857

I don't think that you will be able to do this by directly targeting the placeholder pseudo class (::placeholder).

Only a small subset of CSS properties can be applied to this element and position is not one of them:

https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder

I think you will need to take the approach of a wrapper with span and input and position appropriately.

Upvotes: 1

Related Questions