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

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

1 个答案: