Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <form>
    <input type="text" name="email" id="email" placeholder="Email">
    
    <label for="firstname" class="bad">First name:</label>
    <input type="text" name="firstname" id="firstname" placeholder="First name">
    
    <label for="lastname" class="bad2">Last name:</label>
    <input type="text" name="lastname" id="lastname" placeholder="Last name">
​
    <label for="company" class="bad3">Company:</label>
    <input type="text" name="company" id="company" placeholder="Company">
    
    <label for="position" class="good">Position:</label>
    <input type="text" name="position" id="position" placeholder="Position">   
   
    <input type="submit" value="Send">
  </form>
</body>
</html>
 
body {
  padding-right: 20px;
  padding-left: 20px;
  font-size: 40px;
  font-weight: 300;
  font-family: "Niveau Grotesk", sans-serif;
}
​
input[type="text"], input[type="submit"], fieldset {
  margin-bottom: 24px;
  display: block;
}
​
input[type="text"] {
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  font-size: 28px;
  font-weight: 300;
  font-family: "Niveau Grotesk", sans-serif;
}
​
input[type="radio"] + label, input[type="checkbox"] + label {
  position: relative;
  top: 5px;
  font-size: 28px;
}
​
input[type="text"], input[type="submit"], textarea, fieldset {
  margin-bottom: 24px;
  display: block;
}
​
.bad {
  display: none;
}
​
.bad2 {
  position: absolute;
  left: -9999px;
}
​
.bad3 {
  position: absolute;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}
​
.good {
  position: absolute !important;
  height: 1px; width: 1px; 
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}
​
::-webkit-input-placeholder {
   font-style: italic;
}
​
:-moz-placeholder { /* Firefox 18- */
   font-style: italic;  
}
​
::-moz-placeholder {  /* Firefox 19+ */
   font-style: italic;  
}
​
:-ms-input-placeholder {  
   font-style: italic;  
}
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
acacheungpro
0viewers