2

I know using JavaScript, I could have a input form which could modify the style of those values which have been modified, by doing something like:

<input type="text" onchange="changeMyStyle()">

(Where changeMyStyle would be a function which would do the obvious, but I don't feel like hacking out right now, especially if I won't need it.)

However, I also know CSS is getting increasingly sophisticated in what it can do, but most of what I know it is limited to CSS2 or earlier.

Would it be possible to something equivalent using pure CSS, perhaps using pseudo-classes?

(This is our page -- we can control it completely. However, currently we are rendering the page in Elixir/Pheonix and have no need for client-side JavaScript. As I'm not a fan of JavaScript and all I really want is what can be percieved as a style change, I am looking to avoid putting JavaScript into the project.)

Brian Kessler
  • 2,187
  • 6
  • 28
  • 58
  • Possible duplicate of [Detect if an input has text in it using CSS -- on a page I am visiting and do not control?](https://stackoverflow.com/questions/16952526/detect-if-an-input-has-text-in-it-using-css-on-a-page-i-am-visiting-and-do-no) – metaDesign Sep 02 '19 at 08:43
  • As I added to the question, no this is not a duplicate. We control the page. We are also not looking to detect if the input has text but rather if the value has change. It could be also be from a previous value to a new value. – Brian Kessler Sep 02 '19 at 09:04

1 Answers1

1

You could use the :placeholder-shown pseudo class. I don't know if it's supported in css2, as I only work with css3. This class is basically checking if the placeholder is shown. To check if there is value in the input field you could combine this selector with the :not pseudo class.

It's supported in most modern browsers Other than that I cannot think about an other option besides JavaScript.

This would look sort of like this:

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}
<input placeholder="Text is required" />
<input placeholder=" " value="This one is valid" />
<input placeholder=" " />

By the way, I copied this snippet from here

Tim Gerhard
  • 3,477
  • 2
  • 19
  • 40
  • Interesting approach. I was hoping for something which would monitor the value itself. And it would be a problem if we needed the user to be able to actually edit the existing value... but since it seems we may not, we might be able to use this. :-) (I'm leaving this unanswered for now to see if anyone suggests a way to monitor the value instead of the placeholder.) – Brian Kessler Sep 02 '19 at 12:08
  • 1
    That's fine but I really think there is no way around javascript if you want more control of your inputs but I totally understand that you don't want to just start using js for that – Tim Gerhard Sep 03 '19 at 07:11
  • 1
    :placeholder-shown is new to Selectors level 4, so you're right that it's part of CSS3 (I know that sounds wrong, but trust me, it's correct). That said, I think @Brian is just saying most of what he knows is from the CSS2 era and he isn't up to speed with the latest features, rather than he can only work with CSS2 (because that means having to support IE6-IE8, Firefox 2, etc)... – BoltClock Sep 03 '19 at 07:21
  • This of course only works if the form starts off blank. In which case you probably won't need the CSS anyway, since it's quite obvious if someone typed text or nor. The issue is when you have a form to edit data, THAT's when you need to be able to tell if any fields have changed... sadly CSS can't help. Yet. – gotofritz Mar 27 '22 at 19:48