Question

我试图像这样创建完全相同的搜索栏：

我使用文本框和按钮使用ff：codes：

重新创建它

<input type="text" class="google-mail-search"><button class="google-search-btn"></button>

这是CSS：

.google-search-btn{
    background-color: #4486F7; 
    background-image: url('http://i.imgur.com/UWlZaD6.png'); 
    width: 30px;
    height: 40px;
}
.google-mail-search{
    border: none; 
    padding: 6px; 
    margin: 0px; 
    height: auto; 
    width: 100%; 
    transparent; 
    position: absolute; 
    z-index: 6; 
    left: 0px;
}

这是我的JSFIDDLE：https://jsfiddle.net/hzbh6zya/4/

我应该如何修改我的代码以获得相同的搜索栏？

请帮忙！

Answer 1

<div class="wrap">
   <div class="search">
      <input type="text" class="searchTerm" placeholder="What are you looking for?">
      <button type="submit" class="searchButton">
        <i class="fa fa-search"></i>
     </button>
   </div>
</div>

.search {
  width: 100%;
  position: relative
}

.searchTerm {
  float: left;
  width: 100%;
  border: 3px solid #00B4CC;
  padding: 5px;
  height: 20px;
  border-radius: 5px;
  outline: none;
  color: #9DBFAF;
}

.searchTerm:focus{
  color: #00B4CC;
}

.searchButton {
  position: absolute;  
  right: -50px;
  width: 40px;
  height: 36px;
  border: 1px solid #00B4CC;
  background: #00B4CC;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 20px;
}

/*Resize the wrap to see the search bar change!*/
.wrap{
  width: 30%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 2

 <div class="input-group" id="adv-search">
        <input type="text" class="form-control" />
        <div class="input-group-btn">
            <div class="btn-group" role="group">
                <div class="dropdown dropdown-lg">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
                    <div class="dropdown-menu dropdown-menu-right" role="menu">
                        <option value="0" selected>All</option>
                        <option value="1">Featured</option>
                        <option value="2">Most popular</option>
                        <option value="3">Top rated</option>
                        <option value="4">Most commented</option>
                    </div>
                </div>
                <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
            </div>
        </div>
    </div>

Html

.dropdown.dropdown-lg .dropdown-menu {
    margin-top: -1px;
    padding: 6px 20px;
}
.input-group-btn .btn-group {
    display: flex !important;
}
.btn-group .btn {
    border-radius: 0;
    margin-left: -1px;
}
.btn-group .btn:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
}
.form-group .form-control:last-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

@media screen and (min-width: 768px) {
    #adv-search {
        width: 500px;
        margin: 0 auto;
    }
    .dropdown.dropdown-lg {
        position: static !important;
    }
    .dropdown.dropdown-lg .dropdown-menu {
        min-width: 500px;
    }
}

<强> CSS

<link rel="stylesheet"...

Answer 3

使用bootstrap

<div class="input-group">
      <select class="form-control">
        <option value="">Default select</option>
        <option value="">Default select</option>
        <option value="">Default select</option>
      </select> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div>

Fiidler https://jsfiddle.net/zr61h343/1/

搜索栏错误填充高度？

3 个答案: