Question

我想要实现的是在输入的末尾添加一个圆形搜索按钮，但不知怎的，我没有得到如何这样做的逻辑。我使用Font Awesome作为显示图标的字体。

＆＃13;

.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+ */
}

＆＃13;

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

＆＃13;

Answer 1

您无法在<button>中放置<input>（或任何其他元素）。但是你可以假装＆＃39;它，通过具有看起来像输入的包含元素。然后，您可以使用所需的CSS样式将按钮定位到输入的右侧，使其显示为圆形。试试这个：

＆＃13;

.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;

Answer 2

我希望这段代码可以帮助您在文本框中创建按钮。

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;
}

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>

希望它有所帮助。

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

3 个答案: