title: The CSS input[value=whatever] selector doesn't seem to match against input.value. What am I missing?
body: <p>N.B.: I should note that the proper solution to this is to just use the 'placeholder' attribute of an input, but the question still stands.</p>
  
  <p>Another N.B.:  Since, as Quentin explains below, the "value" attribute stores the <em>default</em> value, and the input.value IDL attribute stores the <em>current</em> value, the JavaScript I used to "fix" the problem in my below example is non-conforming, as it uses the (non-IDL) value attribute to store current, rather than default, values.  Besides, it involves DOM access on every key press, so it was always just a flawed demo of the problem I was having.  It's actually quite terrible code and shouldn't be used ever.</p>
  
  <p>CSS selectors made me think that I could make an input with a label that acts as a preview without any JS. I absolutely position the input at 0,0 inside the label (which is displayed as an inline-block) and give it a background of "none", but only if it's got a value of "" and isn't focussed, otherwise it has a background colour, which obscures the label text.</p>
  
  <p>The <a href="http://developers.whatwg.org/common-input-element-attributes.html#common-input-element-apis" rel="nofollow">HTML5 spec says that input.value reflects the current value of an input</a>, but even though input.value updates as you type into an input, CSS using the input[value=somestring] selector applies based only on what was explicitly typed into the document, or set in the DOM by the JavaScript setAttribute method (and perhaps by other DOM-altering means).</p>
  
  <p><a href="http://jsfiddle.net/MtzVD/" rel="nofollow">I made a jsFiddle representing this.</a></p>
  
  <p>Just in case that is down, here is an HTML document containing the relevant code:</p>
  
  <pre><code>&lt;!doctype html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;title&gt;The CSS Attribute selector behaves all funny&lt;/title&gt;
  
          &lt;style&gt;
              label {
                  display: inline-block;
                  height: 25px;
                  line-height: 25px;
                  position: relative;
                  text-indent: 5px;
                  min-width: 120px;
              }
              label input[value=""] {
                  background: none;
              }
              label input, label input:focus {
                  background: #fff;
                  border: 1px solid #666;
                  height: 23px;
                  left: 0px;
                  padding: 0px;
                  position: absolute;
                  text-indent: 5px;
                  width: 100%;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;form method="post"&gt;
              &lt;p&gt;&lt;label&gt;name &lt;input required value=""&gt;&lt;/label&gt;&lt;/p&gt;
          &lt;/form&gt;
          &lt;p&gt;&lt;button id="js-fixThis"&gt;JS PLEASE MAKE IT BETTER&lt;/button&gt;&lt;/p&gt;
          &lt;script&gt;
              var inputs = document.getElementsByTagName('input');
              var jsFixOn = false;
              for (i = 0; i &lt; inputs.length; i++) {
                  if (inputs[i].parentNode.tagName == 'LABEL') { //only inputs inside a label counts as preview inputs according to my CSS
                      var input = inputs[i];
                      inputs[i].onkeyup= function () {
                          if (jsFixOn) input.setAttribute('value', input.value);
                      };
                  }
              }
  
              document.getElementById('js-fixThis').onclick = function () {
                  if (jsFixOn) {
                      this.innerHTML = 'JS PLEASE MAKE IT BETTER';
                      jsFixOn = false;
                  } else {
                      this.innerHTML = 'No, actually, break it again for a moment.';       
                      jsFixOn = true;
                  }
              };
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I could be missing something, but I don't know what.</p>