Hi,
This is a quick n’ dirty update I whipped up and tested in firebug but try updating the following styles:
form#sbc-search {
display:inline;
width:600px; /*define a width*/
}
form#sbc-search input#s {
background:none repeat scroll 0 0 #FCB342;
border:0 solid #BBBBBB;
float:left;
margin:6px 10px 10px 0;
padding:4px 10px;
width:100px;
}
form#sbc-search select#cat {
-moz-border-radius:15px 15px 15px 15px;
background:url("arrow.png") no-repeat scroll 88% 50% #FCB342;
border:0 solid #BBBBBB;
height:30px;
margin:0 8px 10px 0;
padding:7px 20px;
width:180px;
}
form#sbc-search input#sbc-submit {
-moz-border-radius:15px 15px 15px 15px;
background:none repeat scroll 0 0 #FCB342;
border:0 solid #BBBBBB;
height:30px;
margin:0 0 10px;
width:100px;
}
Ignore the -moz-border-radius styles and add your own radius styles as required. I copied this from firefox so this is the CSS code it outputs. You can then align them vertically and the horizontal spacing using margins or if you apply “position:relative; you can use: top, right, bottom, or left styles (eg: top:10px; etc)
Anyway, hope it helps.
Q
Thread Starter
BBoxed
(@bboxed)
thanks it worked, but if you could help with something else.
alright i changed a lil bit of the coding to make it the way i want it.
but now there is a couple more things that you can help me with
1. i think. i did it right, set the 3 things to have the same height, but it looks like its not working right…. or it could be that the input field, is not round, how can i make it round. also the SEARCH button, is not aligning right
2. as you may see on the code, i want the search TEXT for the user input for it to be bigger…
3. lastly how can i add a custom image to the drop down menu, say i want to add my own arrow, for it too look nicer.
form#sbc-search {
display:inline;
width:800px; /*define a width*/
}
form#sbc-search input#s {
background:none repeat scroll 0 0 #FCB342;
border:0 solid #BBBBBB;
float:left;
margin:6px 10px 10px 0;
padding:4px 10px;
width:400px;
height:50px;
font-size;20px;
}
form#sbc-search select#cat {
-moz-border-radius:15px 15px 15px 15px;
background:url("arrow.png") no-repeat scroll 88% 50% #FCB342;
border:0 solid #BBBBBB;
height:50px;
margin:0 8px 10px 0;
padding:7px 20px;
width:200px;
}
form#sbc-search input#sbc-submit {
-moz-border-radius:15px 15px 15px 15px;
background:none repeat scroll 0 0 #FCB342;
border:0 solid #BBBBBB;
height:50px;
margin:0 8px 10px 0;
width:100px;
}
Thread Starter
BBoxed
(@bboxed)
i fixed the search text height, it was a little mistake of :,;
also. made the input round.
/* 5. Search Form */
form#sbc-search {
display:inline;
width:800px; /*define a width*/
}
form#sbc-search input#s {
-moz-border-radius:15px 15px 15px 15px;
background:none repeat scroll 0 0 #FCB342;
border:0 solid #BBBBBB;
float:left;
margin:6px 10px 10px 0;
padding:4px 10px;
width:400px;
height:60px;
font-size:20px;
}
form#sbc-search select#cat {
-moz-border-radius:15px 15px 15px 15px;
background:none repeat scroll 0 0 #FCB342;
border:0 solid #BBBBBB;
float:left;
margin:6px 10px 10px 0;
padding:4px 10px;
width:200px;
height:60px;
font-size:20px;
}
form#sbc-search input#sbc-submit {
-moz-border-radius:15px 15px 15px 15px;
background:none repeat scroll 0 0 #FCB342;
border:0 solid #BBBBBB;
float:left;
margin:6px 10px 10px 0;
padding:4px 10px;
width:100px;
height:50px;
font-size:20px;
}
the thing is that i want them to look the same, and style the arrow, still not able to do it
Hi,
There’s not much you can do with the arrow (that I know of)… Also different browsers (well IE) will probably need to have styles defined specific to it in order for it to have the same consistent display across browsers.
Also, the style you use to round the corners are specific to Mozilla browsers… and I dont think it’ll work in web-kit based browsers like Safari and Chrome (?)… It also will definitely not work in IE.. any version (until IE9 hopefully.. if they get it right for ONCE!!)…
Try this style for the dropdown:
form#sbc-search select#cat {
-moz-border-radius:15px 15px 15px 15px;
background:none repeat scroll 0 0 #FCB342;
border:0 solid #BBBBBB;
float:left;
font-size:20px;
height:68px;
margin:6px 10px 10px 0;
padding:20px 10px;
width:200px;
}
Also, for the rounded corners you may want to add the following to the elements you want rounded (this should cover you for all major browsers except IE):
-moz-border-radius: 15px 15px 15px 15px;
-khtml-border-radius-bottomleft: 15px;
-khtml-border-radius-bottomright: 15px;
-khtml-border-radius-topleft: 15px;
-khtml-border-radius-topright: 15px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
border-radius: 15px 15px 15px 15px;
Cheers,
Q
