Title: CSS INLINE HELP
Last modified: August 19, 2016

---

# CSS INLINE HELP

 *  [BBoxed](https://wordpress.org/support/users/bboxed/)
 * (@bboxed)
 * [15 years, 10 months ago](https://wordpress.org/support/topic/css-inline-help/)
 * ok..
 * here is the link
    [http://mexicalifacil.com/index/](http://mexicalifacil.com/index/)
 * the search orange funciont, i want it too look line… like
 * input text > category pick > search
 * instead of
    inpute text search > category pick
 * here is the html/php on my header
 *     ```
       <div class="left">
       <?php if(function_exists('sbc')){
       	sbc();
       } else { ?>
       				<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
       				  <div id="search">
       				    <input class="searchinput" type="text" value="Search this site..." onclick="this.value='';" name="s" id="s" />
       				    <input class="searchsubmit" type="submit" value="GO"/>
       <?php } ?>
       				  </div>
       				</form>
       ```
   
 * and here is the CSS
 *     ```
       /* 5. Search Form */
       #searchform { margin: 0px 0px 0px 10px; }
       .searchinput { width: 120px; height: 13px; padding: 2px 2px 2px 2px; font-size: 11px; color: #666; border: 1px solid #e6e6e6; }
       .searchsubmit { background: url(images/searchbg.gif) repeat-x center; height: 19px; padding: 1px 2px 1px 2px; font-size: 11px; font-weight: bold; color: #333; border: 1px solid #e6e6e6; cursor: pointer; }
   
       form#sbc-search {display: inline; float:right:}
       form#sbc-search * {margin: 0px; display: inline; float:right;}
   
       form#sbc-search input#s {background: #fcb342; border: 0px solid #bbbbbb; padding: 4px 10px; width: 80%; margin: 0px auto 10px;}
   
       form#sbc-search select#cat {background: #fcb342  url(arrow.png) 88% 50% no-repeat; height: 30px; width: 180px; border: 0px solid #bbbbbb; padding: 4px 20px; -khtml-appearance: none; /* fix default safai styling */ border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;}
   
       form#sbc-search select#cat option {padding: 2px 4px;}
   
       form#sbc-search input#sbc-submit {height: 30px; width: 40%; margin: 0px auto 10px; background: #fcb342;  border: 0px solid #bbbbbb; float: right; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;}
       ```
   

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [Quincy](https://wordpress.org/support/users/lodjixmedia/)
 * (@lodjixmedia)
 * [15 years, 10 months ago](https://wordpress.org/support/topic/css-inline-help/#post-1581825)
 * 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](https://wordpress.org/support/users/bboxed/)
 * (@bboxed)
 * [15 years, 10 months ago](https://wordpress.org/support/topic/css-inline-help/#post-1581828)
 * 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](https://wordpress.org/support/users/bboxed/)
 * (@bboxed)
 * [15 years, 10 months ago](https://wordpress.org/support/topic/css-inline-help/#post-1581829)
 * 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
 *  [Quincy](https://wordpress.org/support/users/lodjixmedia/)
 * (@lodjixmedia)
 * [15 years, 10 months ago](https://wordpress.org/support/topic/css-inline-help/#post-1581830)
 * 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

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘CSS INLINE HELP’ is closed to new replies.

 * 4 replies
 * 2 participants
 * Last reply from: [Quincy](https://wordpress.org/support/users/lodjixmedia/)
 * Last activity: [15 years, 10 months ago](https://wordpress.org/support/topic/css-inline-help/#post-1581830)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics