gpt4 book ai didi

html - 如何在输入框中插入搜索按钮

转载 作者:行者123 更新时间:2023-12-02 17:21:20 25 4
gpt4 key购买 nike

我想要实现的是在输入的末尾添加一个圆形搜索按钮,但不知何故我不明白如何这样做的逻辑。我使用 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..">

最佳答案

您不能放置 <button> (或任何其他元素)在 <input> 中.但是,您可以通过使用看起来像输入的包含元素来“伪造”它。然后,您可以使用所需的 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>

关于html - 如何在输入框中插入搜索按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42437362/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com