Как сделать этот уникальный вид панели поиска?

Question

Я хотел бы создать панель поиска, которая похожа на ту, что в скрипке. Это в основном одна строка, в которую пользователи будут вводить текст, без какой-либо границы.

Есть ли у кого-нибудь идеи о том, как это можно сделать?

See JSfiddle 

Fiddle: http://jsfiddle.net/9s1zxjfv/

Answer 1

это сделать:

CSS:

#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 **/ 
} 

HTML:

<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 :)">