卡卡網(wǎng)

在這篇新文章中，您將學習如何使用CSS3配合HTML placeholder屬性創(chuàng)建一個精美的CSS3搜索框。

CSS3搜索框

HTML搜索表單結(jié)構(gòu)

form元素被用作包裝，而兩個input被用來作為搜索字段和搜索按鈕。

HTML搜索表單結(jié)構(gòu)

代碼

<form id="searchbox" action="">
  <input id="search" type="text" placeholder="這里輸入">
  <input id="submit" type="submit" value="搜 索">
</form>

您可能會注意到該placeholder屬性，但現(xiàn)在暫時忽略它，稍后我們將討論它。

表格包裝樣式

#searchbox {
    background-color: #eaf8fc;
    background-image: linear-gradient(#fff, #d4e8ec);
    border-radius: 35px;
    border-width: 1px;
    border-style: solid;
    border-color: #c4d9df #a4c3ca #83afb7;
    width: 500px;
    height: 35px;
    padding: 10px;
    margin: 100px auto 50px;
    overflow: hidden; /* Clear floats */
  }

在下面您可以看到當前結(jié)果：

表格包裝樣式

輸入(input)樣式

#search,
  #submit {
    float: left;
  }

  #search {
    padding: 5px 9px;
    height: 23px;
    width: 380px;
    border: 1px solid #a4c3ca;
    font: normal 13px 'trebuchet MS', arial, helvetica;
    background: #f1f1f1;
    border-radius: 50px 3px 3px 50px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
  }

  #submit
  {
    background-color: #6cbb6b;
    background-image: linear-gradient(#95d788, #6cbb6b);
    border-radius: 3px 50px 50px 3px;
    border-width: 1px;
    border-style: solid;
    border-color: #7eba7c #578e57 #447d43;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3),
                0 1px 0 rgba(255, 255, 255, 0.3) inset;
    height: 35px;
    margin: 0 0 0 10px;
    padding: 0;
    width: 90px;
    cursor: pointer;
    font: bold 14px Arial, Helvetica;
    color: #23441e;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  }

  #submit:hover {
    background-color: #95d788;
    background-image: linear-gradient(#6cbb6b, #95d788);
  }

  #submit:active {
    background: #95d788;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  }

  #submit::-moz-focus-inner {
    border: 0;  /* Small centering fix for Firefox */
  }

小提示

元素添加float:left后，不用再添加display:block。

HTML5 placeholder(占位符)屬性

只要該字段為空且未聚焦，該新的HTML5 placeholder(占位符)屬性就會在該字段中顯示文本，然后隱藏該文本。

#search::-webkit-input-placeholder {
    color: #9c9c9c;
    font-style: italic;
  }

  #search:-moz-placeholder {
    color: #9c9c9c;
    font-style: italic;
  }

  #search:-ms-placeholder {
    color: #9c9c9c;
    font-style: italic;
  }

execcodegetcode

 顯示結(jié)果

css3搜索框

標簽: css  css3  搜索框  search-box