cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              %form
  %input{type: "text", required: ""}
  %label{placeholder: "Adaptive Placeholder", alt: "Placeholder"}
/ Featured on LittleBigDetails
/ http://littlebigdetails.com/post/82478225432/
            
          
!
            
              // First, pass in the important variables.
.adaptive_placeholder(@height, @radius, @margin: 1em, @border: 1px) {
  @borders: (@border * 2); // <- To avoid repeating below
  box-sizing: border-box;  // <- Important for accurate sizing
  width: 100%;             // <- Could be almost anything
  height: ~"calc(@{height} + @{borders})"; 
  margin: 0 0 @margin;
  padding: @margin;
  border: @border solid #ccc;
  border-radius: @radius;
  background: #fff;
  resize: none;  // <- For textareas
  outline: none; // <- Because ugly
  //
  // Following block controls all the color change
  //
  &[required] {
    &:focus {
      border-color: #00bafa;
      + label {
        &[placeholder] {
          &:before {
            color: #00bafa;
          }
        }
      }
    }
    //
    // Following block selects label directly adjacent to input
    //
    &:focus,
    &:valid {
      + label {
        &[placeholder] {
          &:before {
            transition-duration: .2s;
            //
            // Following lines move placeholder out of the way
            //
            transform: translate(0, (@margin * -1.5)) scale(.9, .9);
          }
        }
      }
    }
    //
    // Following block injects string from label's 'alt' attr.
    // It comes before the other 'content' property so I can
    // override it. Uses "invalid" pseudo-selector to know
    // when to do that.
    //
    &:invalid {
      + label {
        &[placeholder] {
          &[alt] {
            &:before {
              content: attr(alt); // Content property 1 of 2
            }
          }
        }
      }
    }
    + label {
      &[placeholder] {
        display: block;
        pointer-events: none; // Allows clicking thru label
        line-height: @margin * 1.25;
        // Following pulls label into position
        margin-top: ~"calc(-@{height} - @{borders})";
        // Following offsets that above
        margin-bottom: ~"calc((@{height} - @{margin}) + @{borders})";
        //
        // Following ':before' is needed to switch between
        // different strings.
        //
        &:before {
          content: attr(placeholder); // Content property 2 of 2
          display: inline-block;
          margin: 0 ~"calc(@{margin} + @{borders})";
          padding: 0 2px;
          color: #898989;
          white-space: nowrap;
          transition: .3s ease-in-out;
          //
          // Following lines lets me use solid color as bkg img.
          // This lets me size bkg to something more sublte
          //
          background-image: linear-gradient(to bottom, #fff, #fff);
          background-size: 100% 5px;
          background-repeat: no-repeat;
          background-position: center;
        }
      }
    }
  }
}
//
// Following block is how I call the above function
//
input {
  @height: 3em;
  &[type="text"] {
    .adaptive_placeholder(@height, (@height / 2));
  }
}










// For Demo Only
html {
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console