Keep transition state when input field contains text - CSS3

Question

I have the following input field which I have applied some CSS transitions on:

<input type="text" id="input-text" class="both input-text">

<label id="test" for="input-text" class="label-text-first"></label>
<label id="test" for="input-text" class="label-text-second"></label>
<label id="test" for="input-text" class="both label-text-placeholder"></label>

My problem is, I want to keep the transitioned state if the input-field contains text, otherwise it's allowed to go back to the original position.

Is this possible to achieve through pure CSS3 or do I need javascript?

according to this: http://stackoverflow.com/questions/16952526/detect-if-an-input-has-text-in-it-using-css CSS cannot detect the value of an input. I think you'll need javascript. You could add a class to your input when it has a value (with JS), then apply the `:not(.your-class-here)` selector to your input transition. Then it wouldn't get applied when the input has a value. Just a thought. — lhan, Sep 12 '15 at 18:32
@lhan hm - interesting approach. I'll give that a go, thanks. — Nilzone-, Sep 12 '15 at 18:39
I would go with @jaunts approach, with pure css. very slick! — lhan, Sep 12 '15 at 18:43
see my solution on this question http://stackoverflow.com/questions/32519117/why-is-inputinvalid-true-when-the-input-is-empty/32519875#32519875 — Kristijan Iliev, Sep 12 '15 at 18:47

score 3 · Accepted Answer · answered Sep 12 '15 at 18:40

Actually using the required attribute, alongside with the :valid pseudo selector, we can do this with pure CSS, as demonstrated:

html {
  background-color: #43394a;
  color: #555;
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 20px;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
label,
input {
  position: absolute;
  width: 15%;
  height: 15%;
  top: 50%;
  left: 50%;
  border: 2px solid white;
}
.label-text-first {
  transform: translate(-100%, -50%);
  -webkit-transform: translate(-100%, -50%);
  -moz-transform: translate(-100%, -50%);
  border: 0.4vw solid #9686a2;
  border-right: none;
  transition: left 0.4s;
  -webkit-transition: left 0.4s;
  -moz-transition: left 0.4s;
}
.label-text-second {
  transform: translate(-0%, -50%);
  -webkit-transform: translate(-0%, -50%);
  -moz-transform: translate(-0%, -50%);
  border: 0.4vw solid #9686a2;
  border-left: none;
  transition: left 0.4s;
  -webkit-transition: left 0.4s;
  -moz-transition: left 0.4s;
}
.both {
  width: 28%;
  height: 12%;
  text-align: center;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  background-color: transparent;
  outline: none;
  border: none;
  font-size: 2.0vw;
  font-weight: bold;
  color: #9686a2;
}
.label-text-placeholder {
  z-index: 8888;
  transition: transform 0.4s;
  -webkit-transition-property: transform;
  -webkit-transition-duration: 0.4s;
  -moz-transition: transform 0.4s;
}
.label-text-placeholder:before {
  display: block;
  content: 'First Name';
  line-height: 12.0vh;
}
.input-text:focus ~ .label-text-first,.input-text:valid ~ .label-text-first {
  left: 49%;
  transition: left 0.4s;
  -webkit-transition: left 0.4s;
  -moz-transition: left 0.4s;
}
.input-text:focus ~ .label-text-second,.input-text:valid  ~ .label-text-second{
  left: 51%;
  transition: left 0.4s;
  -webkit-transition: left 0.4s;
  -moz-transition: left 0.4s;
}
.input-text:focus ~ .label-text-placeholder,.input-text:valid  ~ .label-text-placeholder {
  transform: translate(-50%, 65%);
  -webkit-transform: translate(-50%, 65%);
  -moz-transform: translate(-50%, 65%);
  transition: transform 0.4s;
  -webkit-transition: transform 0.4s;
  -moz-transition: transform 0.4s;
}

<form>
<input type="text" id="input-text" class="both input-text" required>

<label id="test" for="input-text" class="label-text-first"></label>
<label id="test" for="input-text" class="label-text-second"></label>
<label id="test" for="input-text" class="both label-text-placeholder"></label>
</form>

wow - this is very cool. I was not aware of these selectors. +1 — lhan, Sep 12 '15 at 18:43
What is the specific declaration that is causing the transition to remain bound when the input control has content? — Daniel Viglione, Jun 28 '16 at 21:55
@Donato By adding the 'required' attribute to an input you can test to see whether the user has inputted anything using the ':valid' pseudo-selector; after all something required must have a value otherwise it's invalid. — jaunt, Jul 01 '16 at 13:29

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

Try this fiddle

It is done with pure css.

You gonna need to add required attribute to your input like this:

<input type="text" id="input-text" class="both input-text" required>

and to your css add this rules:

.input-text:focus ~ .label-text-first, .input-text:valid ~ .label-text-placeholder {
    left: 49%;
    transition: left 0.4s;
    -webkit-transition: left 0.4s;
    -moz-transition: left 0.4s;
}

.input-text:focus ~ .label-text-second, .input-text:valid ~ .label-text-placeholder{
    left: 51%;
    transition: left 0.4s;
    -webkit-transition: left 0.4s;
    -moz-transition: left 0.4s;
}

.input-text:focus ~ .label-text-placeholder, .input-text:valid ~ .label-text-placeholder {
    transform: translate(-50%, 65%);
    -webkit-transform: translate(-50%, 65%);
    -moz-transform: translate(-50%, 65%);
    transition: transform 0.4s;
    -webkit-transition: transform 0.4s;
    -moz-transition: transform 0.4s;
}

Notice

I just added this rule .input-text:valid ~ .label-text-placeholder to yours.

This rule will place the placeholder inside input text as long as it is not valid, i.e. empty. Otherwise it will be under the input.

Keep transition state when input field contains text - CSS3

2 Answers2