Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  * {margin:0}
  label {
    width:146px;
    /* margin-top:4px; */
    display:block;
    text-align:center;
    color: grey;
    position:absolute;
    text-overflow: ellipsis;
    white-space:nowrap;
    overflow:hidden;
  }
  input {
    position:absolute;
    left:0;
    background:transparent;
    width:150px; /* border-sizing:border-box; */
    text-align:center
  }
  input:focus {background:white}
  
  #first, #i1 {top:30px} 
  #second, #i2 {top:0}
  
  input:focus ~ input { background:white }
 
</style>
</head>
<body>
  <form>
    <label id="first" for="i1">and this is visually the second</label>
    <input tabindex="2" id="i1" type="text" />
    <label id="second" for="i2">second in the source</label>
    <input tabindex="1" id="i2" type="text" />
  </form>
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers