html5 - Issue with select element styling -

html5 - Issue with select element styling -

form user text input , submit button form styling works fine.

now need add together drop downwards box same form. after adding drop downwards menu, styling not perfect.

please help me resolve same.

my html code :

<form class="form-wrapper cf" id="cf-form"> <select name="amt"> <option value="10">mobile phones</option> <option value="20">tablets</option> <option value="50">camera</option> </select> <input type="text" id="valbox" placeholder="search here..." required> <button type="submit" id="butval">search</button> </form>

my css file :

.form-wrapper button { overflow: visible; position: relative; float: right; border: 0; padding: 0; cursor: pointer; height: 40px; width: 15%; 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 text input */ .form-wrapper input { width: 85%; height: 100%; padding: 40px 5px; float: left; font: bold 15px 'lucida sans', 'trebuchet ms', 'tahoma'; border: 0; background: #eee; border-radius: 3px 0 0 3px; } .cf:before, .cf:after{ content:""; display:table; } .cf:after{ clear:both; } .cf{ zoom:1; }

you should css3 tutorials.

look @ fiddle - aligned elements...

just added:

.form-wrapper select { float: left; width: 15%; }

and changed these 2 in .form-wrapper input

width: 66%; padding: 40px 2%;

html5 css3