Sempre achei ‘bonito’, o input onde adicionamos os destinatários no hotmail.

Um dia, estava ‘sem fazer muita coisa’, e resolvi reproduzir o efeito daquele input.

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Input Hotmail</title>
  <link type="text/css" href="main.css" rel="stylesheet" />
  <!--[if IE 6]>
  <style type="text/css">
  #emails #cntmail { top: 3px; left: 74px; }
  </style>
  <![endif]-->
</head>
<body>
  <form action="" method="post">
    <fieldset>
      <label id="meu">meu_email@hotmail.com <img src="seta.gif" alt="" /></label>
      <label id="emails"><span>Para: </span>
        <input type="text" name="email" />
          <span id="cntmail">
            <span>email@provedor.com
              <img src="edit.gif" alt="" class="edit" />
              <img src="del.gif" alt="" class="del" />
            </span>
          </span>
      </label><!-- /emails -->
      <label><span>Assunto: </span>
        <input type="text" name="assunto" /></label>
    </fieldset>
  </form>


</body>
</html>

main.css

* {
  margin: 0;
  padding: 0;
  list-style: none;
  border: none;
}
body {
  font: 13px Tahoma, Arial, sans-serif;
  margin: 50px;
}
fieldset {
  border: 1px solid #cbcbcb;
  padding: 10px 15px;
}
label {
  display: block;
  padding-left: 20px;
  margin: 1px;
}
label span {
  width: 50px;
  display: inline-block;
  text-align: right;
}
input {
  background: #fff;
  font: 13px Tahoma, Arial, sans-serif;
  border: 1px solid #cbcbcb;
  width: 600px;
  padding: 2px 5px;
  color: #2a2a2a;
  height: 20px;
  margin-left: 2px;
}
#meu {
  color: #2a2a2a;
  font-size: 19px;
  padding: 0 0 5px 0;
}
#emails {
  position: relative;
  height: 30px;
}
#emails input {
  padding-left: 165px;
  width: 440px;
}
#emails #cntmail {
  position: absolute;
  top: 2px;
  left: 78px;
  width: auto;
}
#cntmail span {
  border: 1px solid #bbd8fb;
  background: #f3f7fd;
  color: #2a2a2a;
  padding: 2px 5px;
  width: auto;
}
#cntmail img {
  cursor: pointer;
}

Cada destinatário, é um dentro do span#cntmail. Cada vez que adicionarmos um email ‘no input’, precisamos aumentar o padding-left dele, para que a digitação do próximo email comece após os emails já adicionados.

Demonstração Online