StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I found a great code for you:</p> <p>HTML</p> <pre><code><form class="form-wrapper cf"> <input type="text" placeholder="Search here..." required> <button type="submit">Search</button> </form> </code></pre> <p>CSS</p> <pre><code>/*Clearing Floats*/ .cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; } .cf { zoom:1; } /* Form wrapper styling */ .form-wrapper { width: 450px; padding: 15px; margin: 150px auto 50px auto; background: #444; background: rgba(0,0,0,.2); border-radius: 10px; box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2); } /* Form text input */ .form-wrapper input { width: 330px; height: 20px; padding: 10px 5px; float: left; font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma'; border: 0; background: #eee; border-radius: 3px 0 0 3px; } .form-wrapper input:focus { outline: 0; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.8) inset; } .form-wrapper input::-webkit-input-placeholder { color: #999; font-weight: normal; font-style: italic; } .form-wrapper input:-moz-placeholder { color: #999; font-weight: normal; font-style: italic; } .form-wrapper input:-ms-input-placeholder { color: #999; font-weight: normal; font-style: italic; } /* Form submit button */ .form-wrapper button { overflow: visible; position: relative; float: right; border: 0; padding: 0; cursor: pointer; height: 40px; width: 110px; font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma'; color: #fff; text-transform: uppercase; background: #d83c3c; border-radius: 0 3px 3px 0; text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3); } .form-wrapper button:hover { background: #e54040; } .form-wrapper button:active, .form-wrapper button:focus { background: #c42f2f; outline: 0; } .form-wrapper button:before { /* left arrow */ content: ''; position: absolute; border-width: 8px 8px 8px 0; border-style: solid solid solid none; border-color: transparent #d83c3c transparent; top: 12px; left: -6px; } .form-wrapper button:hover:before { border-right-color: #e54040; } .form-wrapper button:focus:before, .form-wrapper button:active:before { border-right-color: #c42f2f; } .form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */ border: 0; padding: 0; } </code></pre> <p>Demo: <a href="http://jsfiddle.net/XwPTa/" rel="noreferrer">On fiddle</a> Source: <a href="http://speckyboy.com/2012/02/15/how-to-build-a-stylish-css3-search-box/" rel="noreferrer">Speckyboy</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload