Forms 如何制作这种独特的搜索栏？

我想创建一个搜索栏，看起来像小提琴中的那个。它基本上是一行，用户可以在上面输入文本，没有任何边框

有人对如何实现这一目标有什么想法吗

See JSfiddle

小提琴：

这样做可以：

CSS:

HTML:

.. 我希望我的搜索栏看起来像这样

谢谢！我错过了这样一个简单的CSS属性。不管怎样，现在我有了另一个问题：当你点击它开始打字时，有没有可能删除围绕着条的蓝色突出显示的框？你可以设置框阴影：0px 0px 0px 35; ffffffff；轮廓：0px；要删除突出显示，请执行以下操作：

#search {
    border-bottom: 2px solid purple;
    width: 500px;
    padding:2px;
    color:darkgray;
    /** removed absolut 4 testing **/
}
.csearch,
.csearch:active, /** added active and focus to remove highlighting **/
.csearch:focus {
    border:0px;
    border-bottom: 2px solid purple;
    width: 500px;
    padding:2px;
    color:darkgray;
    background-color:#ffffff; /** that color of your background OR transparent if image **/
    font-size:14px;
    /** to remove the highlighting when active **/
    outline:0px;
    box-shadow:0px 0px 0px #ffffff; /** or other color/tansparent OR none **/
}

<input type="text" size="55" placeholder="Instead of this type of search bar...">

<div id="search">.. I want my search bar to look like this </div> 

<input type="text" class="csearch" size="55" placeholder="I'm a search bar :)">