我想要实现的是在输入的末尾添加一个圆形搜索按钮,但不知怎的,我没有得到如何这样做的逻辑。我使用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..">
&#13;
答案 0 :(得分:3)
您无法在<button>
中放置<input>
(或任何其他元素)。但是你可以假装&#39;它,通过具有看起来像输入的包含元素。然后,您可以使用所需的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;
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
我希望这段代码可以帮助您在文本框中创建按钮。
input
/*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;
}
答案 2 :(得分:0)
试试这个:
<!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>
希望它有所帮助。