css怎麼做出好看的搜尋方塊樣式？（程式碼範例）

本篇文章給大家介紹一種好看的css搜尋方塊樣式，希望對感興趣的朋友有所協助。

css搜尋方塊樣式代碼具體樣本如下：

<div class="search bar">    <form>        <input placeholder="css搜尋方塊代碼測試" name="cname" type="text">        <button type="submit"></button>    </form></div>

style樣式代碼如下：

* {    box-sizing:border-box;}div.search {    padding:10px 0;}form {    position:relative;    width:300px;    margin:0 auto;}input,button {    border:none;    outline:none;}input {    width:100%;    height:42px;    padding-left:13px;}button {    height:42px;    width:42px;    cursor:pointer;    position:absolute;}     .bar input {    border:2px solid #c5464a;    border-radius:5px;    background:transparent;    top:0;    right:0;}.bar button {    background:#c5464a;    border-radius:0 5px 5px 0;    width:60px;    top:0;    right:0;}.bar button:before {    content:"搜尋";    font-size:13px;    color:#F9F0DA;}

以上搜尋方塊css代碼測試效果如：

註：

所有主流瀏覽器都支援 <button> 標籤。

<input> 標籤用於搜集使用者資訊。根據不同的 type 屬性值，輸入欄位擁有很多種形式。輸入欄位可以是文字欄位、複選框、掩碼後的文本控制項、選項按鈕、按鈕等等。

<button> 標籤定義一個按鈕。在 button 元素內部，您可以放置內容，比如文本或映像。這是該元素與使用 input 元素建立的按鈕之間的不同之處。

如果在 HTML 表單中使用 button 元素，不同的瀏覽器會提交不同的值。Internet Explorer 將提交 <button> 與 <button/> 之間的文本，而其他瀏覽器將提交 value 屬性的內容。請在 HTML 表單中使用 input 元素來建立按鈕。