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>
<script src="http://code.jquery.com/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
<form>
  <fieldset>
    <legend>About You</legend>
    <div>
      <label>Name</label>
      <input type="text">
    </div>
    <div>
      <label>Age</label>
      <input type="text">
    </div>
    <div>
      <label>Nationality</label>
      <input type="text">
    </div>
  </fieldset>
  
  <fieldset>
    <legend>Favorite…</legend>
    <div>
      <label>Beatle</label>
      <input type="text">
    </div>
    <div>
      <label>Chicago bridge</label>
      <input type="text">
    </div>
    <div>
      <label>Australian Rugby player</label>
      <input type="text">
    </div>
  </fieldset>
    
  <fieldset>
    <legend>Least favorite…</legend>
    <div>
      <label>US State</label>
      <input type="text">
    </div>
    <div>
      <label>Broadway musical</label>
      <input type="text">
    </div>
    <div>
      <label>three-digit number</label>
      <input type="text">
    </div>
  </fieldset>
  
</form>
​
<p>
    <b>Step 1:</b>
    When clicking into a field, give the fieldset a cyan background. Only one fieldset should be cyan at a time.
  </p>
  
  <p>
    <b>Step 2:</b>
    When clicking into a field, show this checkmark <img src="http://cdn.dustball.com/tick.png" alt=""> in the field, to the left of the input cursor. That is, don't let the inputted text overlap the image.
  </p>
  
  <p>
    <b>Step 3:</b>
   When hovering over a fieldset, make all the borders of the fields in that fieldset blue. They should go back to normal when the mouse leaves the fieldset.
  </p>
  
</body>
</html>
 
* {
  box-sizing: border-box;
}
​
body {
  font-family: Helvetica;
}
​
fieldset {
  border: 2px solid black;
  margin-bottom: 1em;
}
​
legend {
  padding: 0 .5em;
  font-weight: bold;
}
​
input {
  border: 1px solid #ccc;
  background: none;
  border-width: 0 0 1px;
  padding: .5em .8em;
  font-size: 14px;
  width: 75%;
  outline: none;
}
​
label {
  font-size: 12px;
  width: 24%;
  display: inline-block;
}
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers