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>New input types</title>
</head>
<body>
  <form>
    <label for="telephone">Telephone:</label>
    <input type="tel" pattern="[0-9]{10}" name="telephone" id="telephone">
  
    <label for="website">Website:</label>
    <input type="url" name="website" id="website">
  
    <label for="email">Email:</label>
    <input type="email" name="email" id="email">
  
    <label for="date">Date:</label>
    <input type="date" name="date" id="date">
  
    <label for="time">Time:</label>
    <input type="time" name="time" id="time">
  
    <label for="number">Number:</label>
    <input type="number" name="number" id="number">
    
    <label for="range">Range:</label>
    <input type="range" name="range" id="range">
    
    <label for="range">Styled Range:</label>
    <input type="range" name="range" id="range" class="input--range" max="100" min="0" step="10" as="range">
  
    <label for="color">Color:</label>
    <input type="color" name="color" id="color">
    
    <label>
      Datalist:
      <input list="datalist" name="datalist">
      <datalist id="datalist">
        <option value="Cat">
        <option value="Monkey">
        <option value="Mouse">
        <option value="Panda">
        <option value="Possum">
      </datalist>
    </label>
​
    <input type="submit" value="Submit">
  </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="tel"], input[type="url"], input[type="email"], input[type="date"], input[type="time"], input[type="time"], input[type="number"], input[name="datalist"] {
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  font-size: 28px;
  font-weight: 300;
  font-family: "Niveau Grotesk", sans-serif;
}
​
input {
  margin-bottom: 24px;
  display: block;
}
​
.input--range {
  border-radius: 3px;
  -webkit-box-shadow: 0 -1px 0 #d6d2d1;
  -moz-box-shadow: 0 -1px 0 #d6d2d1;
  box-shadow: 0 -1px 0 #d6d2d1;
  margin-bottom: 40px;
  height: 10px;
  height: 24px \0;
  width: 100%;
  border-radius: 0 \0;
  background-color: #eeecec;
  background-color: transparent \0;
  outline: none;
}
​
.input--range::-moz-range-track {
  border-radius:3px;
  height:10px;
  background-color:#eeecec;
}
​
.input--range::-webkit-slider-thumb {
  -webkit-appearance: none;
  border-radius: 50%;
  -webkit-box-shadow: 0 1px 2px 0 #beb8b6, inset 0 1px 2px 0 #5b8225;
  box-shadow: 0 1px 2px 0 #beb8b6, inset 0 1px 2px 0 #5b8225;
  height:24px;
  width:24px;
  border:6px solid #ffffff;
  background-color:#8dc63f;
  cursor:-webkit-grab;
}
​
.input--range::-moz-range-thumb {
  -moz-appearance: none;
  border-radius: 50%;
  -moz-box-shadow: 0 1px 2px 0 #beb8b6, inset 0 1px 2px 0 #5b8225;
  box-shadow: 0 1px 2px 0 #beb8b6, inset 0 1px 2px 0 #5b8225;
  height: 12px;
  width: 12px;
  border: 6px solid #ffffff;
  background: #8dc63f;
  cursor:-moz-grab;
}
​
.input--range::-ms-thumb {
  border-radius: 50%;
  box-shadow: 0 1px 2px 0 #beb8b6, inset 0 1px 2px 0 #5b8225;
  height: 24px;
  width: 24px;
  border: 6px solid #fff;
  background-color: #8dc63f;
  cursor: pointer;
}
​
.input--range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #8dc63f, 0 1px 2px 0 #beb8b6, inset 0 1px 2px 0 #5b8225;
}
​
.input--range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #8dc63f, 0 1px 2px 0 #beb8b6, inset 0 1px 2px 0 #5b8225;
}
​
.input--range:focus::-ms-thumb {
  box-shadow: 0 0 0 1px #8dc63f, 0 1px 2px 0 #beb8b6, inset 0 1px 2px 0 #5b8225;
}
​
input:invalid {
  background-color: pink;
}
Output

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

Dismiss x
public
Bin info
acacheungpro
0viewers