在导航栏中自定义下拉搜索栏

Question

我想帮助自定义我的悬停导航栏上显示的下拉搜索栏的CSS。可以在以下博客中查看此类元素的示例 - http://www.theprivatelifeofagirl.com/ - 位于导航栏的右上角。

我所拥有的当前编码大致是我想要的元素，但是我无法将元素向左移动，并且在屏幕上可见。目前它太偏向右侧，因此对读者来说是不可见的。我在下面的搜索栏中包含了相关的html和css编码：

<style>
.show-search {
position: absolute;
top: 55px;
right: -1px;
display: none;
z-index: 10000;
}

.show-search #searchform input#s {
width: 190px;
background: #FFF;
webkit-box-shadow: 0 8px 6px -6px rgba(206, 206, 206, .2);
-moz-box-shadow: 0 8px 6px -6px rgba(206, 206, 206, .2);
box-shadow: 0 8px 6px -6px rgba(206, 206, 206, .2);
}

.show-search #searchform input#s:focus {
border: 1px solid #d5d5d5;
}
.searchborder {
border-left: 1px solid #f0f0f0;
position: absolute;
margin: 0;
right: 10px;
bottom: 0px;
height: 50px;
  } 
</style>

<div class='searchborder'>
<div id='top-search'>
  <a href='#'><i class='search'></i></a>
</div>
<div class='show-search'>
  <form action='/search' id='searchform' method='get' role='search'>
    <div>
      <input id='s' name='q' placeholder='Search' type='text' />
    </div>
  </form></div>
</div>

除了将元素稍微向左移动之外，我还想知道如何自定义搜索栏本身。例如，如何更改字体的颜色，边框颜色等。

任何输入都将不胜感激。