title: Floating label styling
body: <p>I am using the CSS found <a href="http://codepen.io/boast/pen/pLjld" rel="nofollow noreferrer">here</a> to make floating form labels. I chose this styling because there is no JavaScript needed and the HTML markup is simple enough (i.e. a <code>div</code> with a class and then only a <code>label</code> and <code>input</code> tag). If there are other simple style sheets available please let me know.</p>
  
  <p>I am a backend developer and I suck at CSS and cannot figure out how to adjust this CSS so it looks nice when:</p>
  
  <ul>
  <li><p>There is a select tag (<code>&lt;select/&gt;</code> instead of an <code>&lt;input/&gt;</code> tag)</p></li>
  <li><p>When the background is not white </p></li>
  </ul>
  
  <p>Any help will be greatly appreciated! </p>
  
  <pre><code>    &lt;form class="float-label" spellcheck="false"&gt;
    &lt;legend&gt;Float Label Demo&lt;/legend&gt;
  
    &lt;!-- we need a wrapping element for positioning the label --&gt;
    &lt;!-- the required attribute is ... required! --&gt;
    &lt;div class="control"&gt;
      &lt;input type="text" name="title" placeholder="Title" required /&gt;
      &lt;!-- yes, this is not nice, in real live, do it with JS --&gt;
      &lt;label for="title"&gt;Title&lt;/label&gt;
    &lt;/div&gt;
  
    &lt;div class="control small"&gt;
      &lt;input type="text" name="price" placeholder="Price" required /&gt;
      &lt;label for="price"&gt;Price&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="control medium"&gt;
      &lt;input type="text" name="location" placeholder="Specific location (optional)" required /&gt;
      &lt;label for="location"&gt;Specific location (optional)&lt;/label&gt;
    &lt;/div&gt;
  
    &lt;div class="control"&gt;
      &lt;textarea name="description" placeholder="Description" required&gt;&lt;/textarea&gt;
      &lt;label for="description"&gt;Description&lt;/label&gt;
    &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>@border: 1px solid #ddd;
  @padding: 10px;
  @label-font-size: 13px;
  
  *,
  *:before,
  *:after {
      box-sizing: border-box;
  }
  
  body {
    width: 100%;
    min-height: 300px;
  }
  
  // Demo styles
  form {
    width: 600px;
    margin: 2em auto;
  
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    font-size: 22px;
  
    legend {
      font-size: 2em;
      margin-bottom: 1em;
      width: 100%;
      border-bottom: @border;
    }
  }
  
  
  // float label
  .float-label {
    .control {
      float: left;
      position: relative;
      width: 100%;
      border-bottom: @border;
      padding-top: @padding + @label-font-size;
      padding-bottom: @padding;
  
      // you proably want to replace these with your grid classes
      &amp;.small {
        width: 30%;
        border-right: @border;
      }
  
      &amp;.medium {
        width: 70%;
        padding-left: @padding;
      }
  
      &amp;:last-child {
       border: 0;
      }
    }
  
    input, textarea {
      display: block;
      width: 100%;
      border: 0;
      outline: 0;
      resize: none;
  
      // inactive but shown label (exceptions: opacity and top)
      &amp; + label {
        position: absolute;
        top: 10px;
        transition: top 0.7s ease, opacity 0.7s ease;
        opacity: 0;
  
        // Some nice styling
        font-size: @label-font-size;
        font-weight: 600;
        color: #ccc;
      }
  
      // THE MAGIC
      // as soon as we start typing, the "required" attribute will
      // set the state to valid and our pseudo selector will match
      &amp;:valid + label {
        opacity: 1;
        top: 3px;
      }
  
      // and we highlight the focused input label
      &amp;:focus + label {
        color: #2c8efe;
      }
    }
  }
  </code></pre>
  
  <p>Here is what this styling looks like when the background is black:</p>
  
  <p><a href="https://i.stack.imgur.com/Gyxsh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gyxsh.png" alt="enter image description here"></a></p>