Detect If an Input Has Text in It Using CSS - on a Page I Am Visiting and Do Not Control

Detect if an input has text in it using CSS -- on a page I am visiting and do not control?

Stylish cannot do this because CSS cannot do this. CSS has no (pseudo) selectors for <input> value(s). See:

• The W3C selector spec
• The Mozilla/Firefox supported selectors
• Cross-browser, CSS3 support table

The :empty selector refers only to child nodes, not input values.

[value=""] does work; but only for the initial state. This is because a node's value attribute (that CSS sees), is not the same as the node's value property (Changed by the user or DOM javascript, and submitted as form data).

Unless you care only about the initial state, you must use a userscript or Greasemonkey script. Fortunately this is not hard. The following script will work in Chrome, or Firefox with Greasemonkey or Scriptish installed, or in any browser that supports userscripts (i.e. most browsers, except IE).

See a demo of the limits of CSS plus the javascript solution at this jsBin page.

// ==UserScript==
// @name     _Dynamically style inputs based on whether they are blank.
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

var inpsToMonitor = document.querySelectorAll (
    "form[name='JustCSS'] input[name^='inp']"
);
for (var J = inpsToMonitor.length - 1;  J >= 0;  --J) {
    inpsToMonitor[J].addEventListener ("change",    adjustStyling, false);
    inpsToMonitor[J].addEventListener ("keyup",     adjustStyling, false);
    inpsToMonitor[J].addEventListener ("focus",     adjustStyling, false);
    inpsToMonitor[J].addEventListener ("blur",      adjustStyling, false);
    inpsToMonitor[J].addEventListener ("mousedown", adjustStyling, false);

    //-- Initial update. note that IE support is NOT needed.
    var evt = document.createEvent ("HTMLEvents");
    evt.initEvent ("change", false, true);
    inpsToMonitor[J].dispatchEvent (evt);
}

function adjustStyling (zEvent) {
    var inpVal  = zEvent.target.value;
    if (inpVal  &&  inpVal.replace (/^\s+|\s+$/g, "") )
        zEvent.target.style.background = "lime";
    else
        zEvent.target.style.background = "inherit";
}

CSS change style if input has value or not

You won't be able to catch this with the value attribute as it will only apply the value on page load.
Either you use the placeholder-shown as Temani Afif answered, or if you want to support edge as well, you can use a :valid selector on a required field

.wrapper {  position: relative;}
input {  font-size: 14px;  height: 40px;}
.placeholder {  position: absolute;  font-size: 16px;  pointer-events: none;  left: 1px;  top: 2px;  transition: 0.1s ease all;}
input:focus~.placeholder {  top: -1px;  font-size: 11px;}
input:valid~.placeholder {  top: -1px;  font-size: 11px;}

<div class="wrapper">  <input type="text" required>  <span class="placeholder">E-Mail</span></div>

<div class="input-group">
  <div class="input-group-prepend">
    <label for="undoLocation" id="undoLocationlabel" class="input-group-text">
       Find songs 
    </label>
  </div>
  <select class="custom-select" name="undoLocation" id="undoLocation" aria-describedby="undoLocationHELP">
    <option value="0">that are currently in the selected locations</option>
    <option selected="selected" value="1">that were originally in the selected locations</option>
  </select>
</div>

<p id="undoLocationHELP" class="form-text text-muted">
  When files have been moved by SongKong you can use this option to find files currently in the selected all location or find files that were originally in the selected location
</p>

$('input').blur(function() {  console.log($(this).val());  if ($(this).val() !== '') {    $(this).addClass('hasvalue')  } else {    $(this).removeClass('hasvalue');  }});

form {  width: 100%;  text-align: center;  padding: 45px 0;}form div {  background: transparent;  height: 55px;  width: 100%;  margin-bottom: 55px;  position: relative;}input {  width: 80%;  height: 78px;  border-radius: 25px;  border-top: 4px solid #0275F5;  border-right: 4px solid #0275F5;  border-left: 4px solid #0275F5;  border-bottom: 4px solid #0275F5;  outline: 0;  font-size: 1.6em;  font-weight: bold;  display: block;  margin: 0 auto;  text-align: center;}.formHeading {  font-size: 2.6em;  color: #0275F5;  text-transform: uppercase;  text-align: center;  margin-top: 0;}form div label {  position: absolute;  bottom: 0;  left: 0;  padding: 0 0.25em;  width: 100%;  height: calc(100% - 1em);  text-align: center;  pointer-events: none;  transition: .25s;  text-transform: uppercase;  font-size: 1.6em;}input:focus + label,input.hasvalue + label {  transform: translate3d(0, -.8em, 0) scale3d(0.55, 0.55, 1);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><div id="wrapper">  <h1 class="formHeading">Sign Up Form</h1>  <form action="index.html" method="post">    <div>      <input type="text" name="user_name" id="name">      <label>Name</label>    </div>    <div>      <input type="email" name="user_email" id="email">      <label>Email Address</label>    </div>    <div>      <input type="password" name="user_password" id="password">      <label>Password</label>    </div>    <div>      <input type="text" name="user_city" id="city">      <label>City</label>    </div>    <div>      <input type="text" name="user_gender" id="gender">      <label>Gender</label>    </div>  </form></div>