Material Design input text demo

index.html

<div class="v-input__slot">
  <fieldset aria-hidden="true">
<!--     <legend style="width: 56px;"><span>​</span></legend> -->
  </fieldset>
  <div class="v-text-field__slot">
    <input id="input-1894" type="text"/>
    <label for="input-1894" class="v-label theme--light" style="left: 0px; right: auto; position: absolute;">Outlined</label>
  </div>
</div>

mwgzqov.markdown

MWgZQov

A Pen by Leif on CodePen.

License.

script.js

document.querySelector("#input-1894").onclick = function() {
  removeAllChildren('fieldset');
  appendLegendNode('fieldset');
};

document.querySelector("#input-1894").onblur = function() {
  removeAllChildren('fieldset');
};

document.querySelector("#input-1894").addEventListener("mouseenter", function(event) {
  document.querySelector("fieldset").style.border = "1px solid #000000";
}, false);

function removeAllChildren(domSelector) {
  var p = document.querySelector(domSelector); 
  var childs = p.childNodes; 
  for(var i = 0; i < childs.length; i++) { 
    p.removeChild(childs[i]); 
  } 
}

function appendLegendNode(domSelector) {
  var p = document.createElement('legend');
  p.style.width = "56px";
  document.querySelector(domSelector).appendChild(p);
}

style.css

.v-input__slot {
  position: relative;
}

.v-input__slot fieldset {
  min-height: 50px;
  border-radius: 10px;
  border: 1px solid #C2C2C2;
}

.fieldset-hover-active {
  border: 1px solid #000000;
}

.v-text-field__slot {
  position: absolute;
  min-height: 50px;
  position: absolute; 
  left: 16px; 
  right: 0; 
  top: 15px; 
  bottom: 0; 
}

.v-text-field__slot input {
  border: none; 
  outline: none;
  height: 50px;
  line-height: 50px;
  font-size: 1.3em;
}

.v-label {
  position: absolute;
  bottom: 17px;
  font-size: 1.3em;
  color: #ccc;
  transition: all ease 0.3s;
  pointer-events: none;
}

input:focus + label {
  color: #f60;
  font-size: 0.8em;
  transform: translateY(-40px);
  margin: 0 2px 0 2px;
}