css - Custom search bar and responsive grid -

css - Custom search bar and responsive grid -

i've found cool article http://www.tripwiremagazine.com/2012/01/how-to-create-a-seach-bar-in-photoshop.html recently. don't know how handle background images within responsive grid. how create such search bar using zurb foundation grid? possible?

thanks!

the search bar in design styled css , wouldn't have utilize background images @ all. here few main points of code create work:

html:

<div class="input-container"> <input type="text" /> <button>search</button> </div>

the text input:

input[type="text"] { box-shadow: inset 0 1px 3px rgba(0,0,0,.3); border-radius: 5px; background-color: #fff; }

the button:

button { margin-left: -10%; background-image: -webkit-linear-gradient(top, #117a03 0%,#287c15 100%); border-radius: 0 5px 5px 0; height: 32px; padding: 0 5px; border: 1px solid #bbb; box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 1px #fff; color: #074f03; text-shadow: 0px 1px #ccc; font-weight: bold; }

you need add together vendor prefixes css3 properties, pretty basic starting point , should give need. here's fiddle working: http://jsfiddle.net/j6dvz/

css responsive-design zurb-foundation