Bootstrap Tutorial - Create round text input

The following code shows how to create round text input.

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
  href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<style type='text/css'>
input.search-query {<!--from  ww  w  .  ja v  a2  s.  c o m-->
  padding-left: 26px;
}

form.form-search {
  position: relative;
}

form.form-search:before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background-image:
    url(http://getbootstrap.com/2.3.2/assets/img/glyphicons-halflings.png);
  background-position: -48px 0;
  position: absolute;
  top: 8px;
  left: 8px;
  opacity: .5;
  z-index: 1000;
}
</style>
</head>
<body>
  <div style="padding: 20px;">
    <form class="form-search form-inline">
      <input type="text" class="search-query" placeholder="Search..." />
    </form>
  </div>
</body>
</html>

Click to view the demo