0

I'm editing some css code on my website, and right now a label of mine only moves when it is under focus. I want it to also hold its position if there is any text in the input field.

Right now I have it like this:

.form-field-input:focus + .form-field-title{
  top: 0.5rem;
  font-size: 0.8125rem;
  transition-delay: 0ms;
}

This is just a standard form in HTML. My label currently is placed in the input box and it moves up and sizes down when it is under focus. But I want it to stay there if it receives text.

chxnge
  • 1
  • 2
  • 2
    Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) – Paulie_D Mar 11 '21 at 20:03
  • Please provide a full example with html, without that it's very difficult to determine. My first question is why are you using top? That would imply you're using absolute positioning, but why take the control out of the document flow? That will create positioning challenges. – Nathaniel Flick Mar 11 '21 at 20:03
  • @NathanielFlick `top` (or any other placement) isn't just useful for absolute positioning. It's also useful for relative positioning, where you don't want to affect everything else, but move a specific element. It's used specifically to take it out of document flow. – disinfor Mar 11 '21 at 20:05
  • @NathanielFlick It's just a standard HTML form with a few inputs, one select, and a message box. As for what I'm doing, I have the label right now placed over my input box. It moves up and sizes down when focused, to make room for the input. But the minute I click anywhere else on the page, it returns to its original size and place, overtop the input. I want it to stay up there if there is text in the input. – chxnge Mar 11 '21 at 20:15
  • @disinfor any idea with what I could do? – chxnge Mar 11 '21 at 20:16
  • 1
    @chxnge please add the html to your question to make it more clear, per Stack Overflow guidelines. – Nathaniel Flick Mar 11 '21 at 20:51

1 Answers1

0

There isn't exactly a pseudo-class (like ::focus) for when an input contains data. Focus & hover are interaction events and have nothing to do with the input content itself.

There are a few options here.

  1. You could utilize the :valid pseudo-class but that will only trigger if the input value matches a regex. So probably not what you really want.

  2. Another option would be to add a class to the input with javascript using the onChange or blur events to check if input value === "" or not.

  3. Finally you can utilize the :placeholder-shown pseudo-class it has pretty good support now but verify your browser targets first.

input:not(:placeholder-shown) {
  ...
}

Of those, the second option will be the most widely supported and controllable.

This answer has more detail about CSS options: Detect if an input has text in it using CSS -- on a page I am visiting and do not control?

And here's a list of all CSS pseudo classes/elements https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Important Note: There are things listed in that document that are NOT in the CSS spec and NOT supported by any browsers. Be sure to check the Can I Use database before deciding what to use.

Bryce Howitson
  • 7,339
  • 18
  • 40