How do i style this form

HTML & CSS
1

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

2

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. :slight_smile:

3

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>
4

You could do this:

.search_cars{display:block; margin-bottom:5px; clear: both; text-align: center;}
5

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?

6

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.