如何在輸入框中插入一個搜索按鈕

Question

我想要實現的是在輸入的末尾添加一個圓形的搜索按鈕，但不知怎的，我沒有得到如何這樣做的邏輯。我使用Font Awesome作爲顯示圖標的字體。

.search-box { 
 
    outline: none; 
 
    padding: 7px; 
 
    padding-left: 10px; 
 
    padding-right: 40px; 
 
    height: 35px; 
 
    width: 100%; 
 
    border-radius: 30px; 
 
    font-size: 15px; 
 
    border-color: transparent; 
 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
 
    box-sizing: border-box; /* Opera/IE 8+ */ 
 
}

<input type="text" class="search-box" placeholder="Search For a Product..">

Answer 1

不能將<input>內的<button>（或任何其它元件）放置。然而，你可以通過一個看起來像輸入的包含元素來「僞造」它。然後，您可以使用所需的CSS樣式將按鈕定位到輸入的右側，使其看起來圓整。試試這個：

.search-container { 
 
    background-color: #FFF; 
 
    position: relative; 
 
    border-radius: 30px; 
 
    padding: 3px 50px 3px 10px; 
 
} 
 
.search-box { 
 
    background-color: transparent; 
 
    outline: none; 
 
    height: 35px; 
 
    font-size: 15px; 
 
    border: 0; 
 
    width: 100%; 
 
} 
 
.search-button { 
 
    position: absolute; 
 
    right: 4px; 
 
    top: 4px; 
 
    background-color: #C00; 
 
    border-radius: 50%; 
 
    border: 0; 
 
    color: #FFF; 
 
    width: 35px; 
 
    height: 35px; 
 
    outline: 0; 
 
} 
 

 
body { 
 
    background: #CCC; 
 
}

<br /><br /><br /> 
 

 
<div class="search-container"> 
 
    <input type="text" class="search-box" placeholder="Search For a Product.."> 
 
    <button class="search-button">Go</button> 
 
</div>

Answer 2

我希望這個代碼將會幫助你在文本框內創建按鈕的想法。

/*Clearing Floats*/ 
 
.cf:before, 
 
.cf:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 

 
.cf:after { 
 
    clear: both; 
 
} 
 

 
.cf { 
 
    zoom: 1; 
 
} 
 

 

 
/* Form wrapper styling */ 
 
.form-wrapper { 
 
    width: 450px; 
 
    padding: 15px; 
 
    margin: 150px auto 50px auto; 
 
    background: #444; 
 
    background: rgba(0, 0, 0, .2); 
 
    border-radius: 10px; 
 
    box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2); 
 
} 
 

 

 
/* Form text input */ 
 

 
.form-wrapper input { 
 
    width: 330px; 
 
    height: 20px; 
 
    padding: 10px 5px; 
 
    float: left; 
 
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma'; 
 
    border: 0; 
 
    background: #eee; 
 
    border-radius: 3px 0 0 3px; 
 
} 
 

 
.form-wrapper input:focus { 
 
    outline: 0; 
 
    background: #fff; 
 
    box-shadow: 0 0 2px rgba(0, 0, 0, .8) inset; 
 
} 
 

 
.form-wrapper input::-webkit-input-placeholder { 
 
    color: #999; 
 
    font-weight: normal; 
 
    font-style: italic; 
 
} 
 

 
.form-wrapper input:-moz-placeholder { 
 
    color: #999; 
 
    font-weight: normal; 
 
    font-style: italic; 
 
} 
 

 
.form-wrapper input:-ms-input-placeholder { 
 
    color: #999; 
 
    font-weight: normal; 
 
    font-style: italic; 
 
} 
 

 

 
/* Form submit button */ 
 

 
.form-wrapper button { 
 
    overflow: visible; 
 
    position: relative; 
 
    float: right; 
 
    border: 0; 
 
    padding: 0; 
 
    cursor: pointer; 
 
    height: 40px; 
 
    width: 110px; 
 
    font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma'; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    background: #d83c3c; 
 
    border-radius: 0 3px 3px 0; 
 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); 
 
} 
 

 
.form-wrapper button:hover { 
 
    background: #e54040; 
 
} 
 

 
.form-wrapper button:active, 
 
.form-wrapper button:focus { 
 
    background: #c42f2f; 
 
    outline: 0; 
 
} 
 

 
.form-wrapper button:before { 
 
    /* left arrow */ 
 
    content: ''; 
 
    position: absolute; 
 
    border-width: 8px 8px 8px 0; 
 
    border-style: solid solid solid none; 
 
    border-color: transparent #d83c3c transparent; 
 
    top: 12px; 
 
    left: -6px; 
 
} 
 

 
.form-wrapper button:hover:before { 
 
    border-right-color: #e54040; 
 
} 
 

 
.form-wrapper button:focus:before, 
 
.form-wrapper button:active:before { 
 
    border-right-color: #c42f2f; 
 
} 
 

 
.form-wrapper button::-moz-focus-inner { 
 
    /* remove extra button spacing for Mozilla Firefox */ 
 
    border: 0; 
 
    padding: 0; 
 
}

<form class="form-wrapper cf"> 
 
    <input type="text" class="search-box" placeholder="Search For a Product.."> 
 
    <button type="submit">Search</button> 
 
</form>

Fiddle

Source

Answer 3

試試這個：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title> Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/font-awesome.min.css"> 
    <link rel="stylesheet" href="css/font-awesome-animation.min.css"> 
    <script src="js/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <style type="text/css"> 
     .search-box { 
     outline: none; 
     padding: 7px; 
     padding-left: 10px; 
     padding-right: 40px; 
     height: 35px; 
     width: 90%; 
     border-radius: 30px; 
     font-size: 15px; 
     border-color: transparent; 
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
     -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
     box-sizing: border-box; /* Opera/IE 8+ */ 
     } 

     #filtersubmit { 
     position: relative; 
     z-index: 1; 
     left: -25px; 
     top: 1px; 
     color: black; 
     cursor:pointer; 
     width: 0; 
     } 
    </style> 
    </head> 
    <body> 
    <br><br> 
    <div class="container"> 
     <input type="text" class="search-box" placeholder="Search For a Product.."> 
     <i id="filtersubmit" class="fa fa-search"></i> 
    </div> 
    </body> 
</html> 

希望它能幫助。