고유 한 검색 창은 어떻게 만듭니 까?

Question

나는 바이올린에있는 것과 같은 검색 창을 만들고 싶습니다. 이것은 기본적으로 사용자가 아무런 경계도없이 텍스트를 입력하는 단일 선입니다.

누구에게 이것이 달성 될 수있는 방법에 대한 아이디어가 있습니까?

See JSfiddle 

바이올린 : 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 :)">