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

我想在自定义一个下拉搜索栏出现在我的悬停导航栏css的帮助。这种元素的一个例子可以在下面的博客上看到——在导航栏的右上角

当前的编码与我预想的元素大致相同，但是我无法将元素向左移动，并且无法在屏幕上看到。目前，它太偏右了，因此读者看不见。我在下面的搜索栏中包含了相关的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>

.显示搜索{
位置：绝对位置；
顶部：55px；
右：-1px；
显示：无；
z指数：10000；
}
.显示搜索#搜索表单输入#{
宽度：190px；
背景：#FFF；
webkit盒阴影：0 8px 6px-6px rgba（206206206.2）；
-moz盒阴影：0 8px 6px-6px rgba（206206206.2）；
盒影：0 8px 6px-6px rgba（206、206、206、2）；
}
.显示搜索#搜索表单输入#s:焦点{
边框：1px实心#d5d5；
}
.搜索边界{
左边框：1px实心#f0；
位置：绝对位置；
保证金：0；
右：10px；
底部：0px；
高度：50px；
} 

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

如有任何意见，将不胜感激