combained inputs for search bar
by Jeremy Bolanos
HTML
<nav id="navBar">
<input type="text" class="input-inline" id="inputValue" /><input type="submit" value="Go" class="input-inline input-submit" id="addValue" />
</nav>
<nav id="navBar2">
<input type="text" class="input-inline" id="inputValue" /><input type="submit" value="Go" class="input-inline input-submit" id="addValue" />
</nav>
CSS
*, input {
box-sizing: border-box;
}
input[type="submit"]::-moz-focus-inner {
border:0;
}
nav#navBar,
nav#navBar2{
position: relative;
display: block;
margin: 5px;
line-height: 40px;
padding: 0 5px;
}
input {
position: relative;
display: inline-block;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 0;
padding: 4px 8px;
background-color: rgb(255, 255, 255);
}
input#inputValue {
width: 160px;
}
input.input-submit {
cursor: pointer;
border-left: 0;
background: linear-gradient(rgb(237, 237, 237), rgb(221, 221, 221)) 0 0 rgba(0, 0, 0, 0);
/* TODO: Add IE Gradient */
}
nav#navBar2 input#inputValue {
border-radius: 4px 0 0 4px;
}
nav#navBar2 input#addValue {
border-radius: 0 4px 4px 0;
}