Element

Something

by evgkch

HTML

<div>
<table class="input">
  <tr>
    <td>Quantity:</td>
    <td><input type="text" value="1"></td>
  </tr>
  <tr>
    <td>Average Price:</td>
    <td>$2.58</td>
  </tr>
  <tr>
    <td>Lead Time:</td>
    <td>26/03/16</td>
  </tr>
</table>
</div>
<form class="search">
  <input type="text">
  <input type="submit" value="">
</form>

CSS

body {
  background-color: #f3f3f3;
  font-family: Courier;
  color: #434343;
}
table.input {
  border-collapse: collapse;
  margin: auto;
}
table.input tr {
  height: 40px;
}
table.input tr td {
  width: 110px;
  padding: none;
}
table.input tr td:nth-child(even) {
  text-align: center;
  font-weight: bold;
}
table.input input[type=text] {
    padding:auto;
    width: 85%;
    height: 100%;
    border: none;
    color: #434343;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    transition: 0.5s;
    outline: none;
}

table.input input[type=text]:focus {
    background-color: #93c47d;
    color: #F5F5F5;
}
.search input[type=text] {
    padding:auto;
    background-position: 10px 10px;
    width: 150px;
    height: 50px;
    padding: 0 10px 0 50px;
    border: none;
    color: #434343;
    font-weight: bold;
    font-size: 16px;
    transition: 0.5s;
    outline: none;
    background-image: url('http://findicons.com/files/icons/1389/g5_system/32/toolbar_find.png');
    background-repeat: no-repeat;
}
.search input[type=text]:focus {
    background-color: #93c47d;
    color: #F5F5F5;
    background-position: 110px 10px;
}
.search input[type=submit] {
  border: none;
  left: -1.8em;
	position: relative;
}