I want to learn on how to style this form box especially the dropdown and also center the button. I’m having no luck with google
This is one of those forum situations where people are going to ask you to show what you’ve tried, or what you’ve learned so far … etc. Just asking for the whole thing to be done for you doesn’t go down well. Have a shot at it, post your code and ask for advice about what to do next if it’s not working.
Well here is what i have done. I can’t seem to put the input type=“submit” in the center
.
search{width:270px}
.search_cars{display:block; margin-bottom:5px}
.search_cars select{border-radius:5px; width:150px;float:right; padding-left:5px}
.search_price select{border-radius:5px; width:75px;float:right; padding-left:6px}
.search_year select{border-radius:5px; width:75px;float:right; padding-left:6px}
<div class="search">
<h5>Search our range of New, Used and Demo Vehicles</h5>
<form>
<div class="search_cars ">
<label>Category</label>
<select>
<option>All Cars</option>
<option></option>
<option></option>
</select>
</div>
<div class="search_cars cl">
<label>Make</label>
<select>
<option>All Cars</option>
<option></option>
<option></option>
</select>
</div>
<div class="search_cars cl">
<label>Model</label>
<select>
<option>All Cars</option>
<option></option>
<option></option>
</select>
</div>
<div class="search_cars cl">
<label>Body</label>
<select>
<option>All Cars</option>
<option></option>
<option></option>
</select>
</div>
<div class="search_price cl">
<label>Price</label>
<select>
<option>All Cars</option>
<option></option>
<option></option>
</select>
<select>
<option>All Cars</option>
<option></option>
<option></option>
</select>
</div>
<div class="search_year cl">
<label>Year</label>
<select>
<option>All Cars</option>
<option></option>
<option></option>
</select>
<select>
<option>All Cars</option>
<option></option>
<option></option>
</select>
</div>
<div class="search_cars search_button">
<input type="Submit" Value="Search" />
</div>
</form>
</div>
You could do this:
.search_cars{display:block; margin-bottom:5px; clear: both; text-align: center;}
thanks your solution work for the button and also i made the form into a table. Is it possible to style the button the same as the image or do we apply background:url?
You can style it just with CSS, although it’s probably still easier to use some background images too.
Here’s a starting point for you with just CSS:
.search_button input {width: 200px; line-height: 30px; border-radius: 15px; background: orange; font-size: 1.5em; border: 1px solid black; box-shadow: 0 0 20px rgba(0,0,0,0.8);}
For the arrows, I would use a background image, and also for the background gradient, as CSS3 gradients suck a little at this point IMHO.