remoed span elements in inputs

index.html

@@ -8,7 +8,7 @@
     <meta name="author" content="Stefano J. Attardi" />
 
     <link href="http://fonts.googleapis.com/css?family=Lato:100,400,700|Playfair+Display:400italic|Source+Code+Pro" rel="stylesheet" type="text/css" />
-    <link rel="stylesheet" type="text/css" media="screen,projection" href="labels.css" />
+    <link rel="stylesheet" type="text/css" href="labels.css" />
     <link rel="stylesheet" type="text/css" media="screen,projection" href="site/site.css" />
     <link rel="stylesheet" type="text/css" media="screen,projection" href="site/sh/shjs.css" />
 
@@ -22,11 +22,13 @@ <h1>Labels inside form fields</h1>
 
     <div class="page" id="info">
 
-    <p>This is one of the best ways to place labels inside input fields, like so:</p>
+    <p>This is one of the best ways to place labels inside input fields, like so:
+
+    </p>
 
     <label class="input">
-      <span>Email address</span>
-      <input type="text" />
+      Email address
+      <input type="text" placeholder="email address" />
     </label>
 
     <p>The solution is based on simple <a href="#html">HTML markup</a>, some <a href="#css">CSS</a>, and a <a href="#javascript">jQuery plugin</a>. The license is <a href="#javascript">MIT</a>.</p>
@@ -39,32 +41,32 @@ <h1>Labels inside form fields</h1>
       <h3>Demo</h3>
 
     <label class="input">
-      <span>Email address</span>
+      Email address
       <input type="text" />
     </label>
 
     <label class="input">
-      <span>Password</span>
+      Password
       <input type="password" />
     </label>
 
     <label class="input">
-      <span>Email address</span>
+      Email address
       <input type="text" value="me@example.com" />
     </label>
 
     <label class="input">
-      <span>Phone number</span>
+      Phone number
       <input type="text" title="+358" value="+358" />
     </label>
 
     <label class="input">
-      <span>Phone number</span>
+      Phone number
       <input type="text" title="+358" value="+358123456789" />
     </label>
 
     <label class="input">
-      <span>Country</span>
+      Country
       <select>
         <option></option>
         <option>US</option>
@@ -75,7 +77,7 @@ <h3>Demo</h3>
     </label>
 
     <label class="input">
-      <span>Your comment</span>
+      Your comment
       <textarea id="comment" rows="3" cols="60"></textarea>
     </label>
 

labels.css

@@ -1,28 +1 @@
-.input {
-  display: block;
-}
-.input span {
-  position: absolute;
-  z-index: 1;
-  cursor: text;
-  pointer-events: none;
-  color: #999;
-  /* Input padding + input border */
-  padding: 7px;
-  /* Firefox does not respond well to different line heights. Use padding instead. */
-  line-height: 17px;
-  /* This gives a little gap between the cursor and the label */
-  margin-left: 2px;
-}
-.input input, .input textarea, .input select {
-  z-index: 0;
-  padding: 6px;
-  margin: 0;
-  font: inherit;
-  line-height: 17px;
-}
-.input select {
-  padding: 5px;
-  /* Unfortunately selects don't respond well to padding. They need an explicit height. */
-  height: 31px;
-}
+

site/site.css

@@ -37,3 +37,16 @@ input, textarea, select {
   min-width: 300px;
   box-sizing: border-box;
 }
+input {
+  height: 2rem;
+}
+
+label {
+  font-weight: bold;
+  font-size: 1.2rem;
+  display: flex;
+  align-items: start;
+  justify-content: center;
+  flex-direction: column;
+  padding: 12px 6px;
+}