HTML中的消失按钮

时间：2019-04-24 07:18:56

标签： javascript html css html5

我写了一个带有按钮的简单输入字段。代码如下。 

form {
  width: 50%;
}


/* Style the search field */

.add-on {
  position: relative;
}

.add-on input {
  width: 100%;
  border-radius: 0;
}

.add-on button {
  position: absolute;
  border-radius: 0;
  top: 2px;
  right: 3px;
  height: 33px;
  width: 60px;
  z-index: 2;
  font-size: 14px;
  padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
  <div class="input-group add-on">
    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
    <button class="btn btn-primary" type="submit">Search</button>
  </div>
</form>

如您所见，当我单击输入字段时，按钮消失了。当我在该表格外单击时，它再次出现。但是我不希望它在单击输入字段时消失。我怎样才能做到这一点？

9 个答案:

答案 0 :(得分：7)

在z-index: 1元素上设置#srch-term

答案 1 :(得分：4)

聚焦时使用z-index 

 input:focus ~ .btn-primary {
     z-index: 100;
 }


form {
  width: 50%;
}


/* Style the search field */

.add-on {
  position: relative;
}

.add-on input {
  width: 100%;
  border-radius: 0;
}

.add-on button {
  position: absolute;
  border-radius: 0;
  top: 2px;
  right: 3px;
  height: 33px;
  width: 60px;
  z-index: 2;
  font-size: 14px;
  padding: 5px;
}

 input:focus ~ .btn-primary {
     z-index: 100;
 }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
  <div class="input-group add-on">
    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
    <button class="btn btn-primary" type="submit">Search</button>
  </div>
</form>

答案 2 :(得分：4)

将z-index CSS规则中的.add-on button更改为3。

.add-on button {
  position: absolute;
  border-radius: 0;
  top: 2px;
  right: 3px;
  height: 33px;
  width: 60px;
  z-index: 3;
  font-size: 14px;
  padding: 5px;
}

答案 3 :(得分：2)

只需为按钮的z-index赋予更高的值即可。可能是在其上放置了div的输入突出显示

form {
  width: 50%;
}


/* Style the search field */

.add-on {
  position: relative;
}

.add-on input {
  width: 100%;
  border-radius: 0;
}

.add-on button {
  position: absolute;
  border-radius: 0;
  top: 2px;
  right: 3px;
  height: 33px;
  width: 60px;
  z-index: 5;
  font-size: 14px;
  padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
  <div class="input-group add-on">
    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
    <button class="btn btn-primary" type="submit">Search</button>
  </div>
</form>

答案 4 :(得分：0)

您应将position: relative设置为按钮

form {
  width: 50%;
}


/* Style the search field */

.add-on {
  position: relative;
}

.add-on input {
  width: 100%;
  border-radius: 0;
}

.add-on button {
  position: relative;
  border-radius: 0;
  top: 2px;
  right: 3px;
  height: 33px;
  width: 60px;
  z-index: 2;
  font-size: 14px;
  padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
  <div class="input-group add-on">
    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
    <button class="btn btn-primary" type="submit">Search</button>
  </div>
</form>

答案 5 :(得分：0)

正如其他人所说的那样，输入字段在聚焦时会覆盖该按钮。 尝试在输入和按钮上设置一个永久的z索引，并使按钮的z索引高于输入的值。

form {
    width: 50%;
  }


  /* Style the search field */

  .add-on {
    position: relative;
  }

  .add-on input {
    width: 100%;
    border-radius: 0;
    z-index: 1020;
  }

  .add-on button {
    position: absolute;
    border-radius: 0;
    top: 2px;
    right: 3px;
    height: 33px;
    width: 60px;
    z-index: 2;
    font-size: 14px;
    padding: 5px;
    z-index: 1021;
  }
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
  <div class="input-group add-on">
    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
    <button class="btn btn-primary" type="submit">Search</button>
  </div>
</form>

答案 6 :(得分：0)

如果我在输入中添加z-index：1并在按钮中添加z-index：3，问题就消失了。无法弄清楚原因，但是按钮上的z-index：2似乎不起作用。

答案 7 :(得分：0)

只需将z-index添加到输入中。该值大于-1且小于按钮z-index 

/* Style the search field */

.add-on input {
  width: 100%;
  border-radius: 0;
  z-index: 0
}

.add-on button {
  position: absolute;
  border-radius: 0;
  top: 2px;
  right: 3px;
  height: 33px;
  width: 60px;
  z-index: 2;
  font-size: 14px;
  padding: 5px;
}

答案 8 :(得分：0)

  

解决方案1-将z-index: 2中的z-index: 3更改为.add-on button，但是如果您的内容增加，则搜索按钮将与内容重叠。 

form {
  width: 50%;
}


/* Style the search field */

.add-on {
  position: relative;
}

.add-on input {
  width: 100%;
  border-radius: 0;
}

.add-on button {
  position: absolute;
  border-radius: 0;
  top: 2px;
  right: 3px;
  height: 33px;
  width: 60px;
  z-index: 3;
  font-size: 14px;
  padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
  <div class="input-group add-on">
    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
    <button class="btn btn-primary" type="submit">Search</button>
  </div>  
</form>

  

解决方案2-从position: absolute中删除top: 2px，right: 3px，z-index: 2，.add-on button，并将height: 33px;更新为{{1 }}在height: 38px;中，它将在输入字段旁边显示搜索，并且不会重叠内容。 

.add-on button
form {
  width: 50%;
}


/* Style the search field */

.add-on {
  position: relative;
}

.add-on input {
  width: 100%;
  border-radius: 0;
}

.add-on button {
  border-radius: 0;
  height: 38px;
  width: 60px;
  font-size: 14px;
  padding: 5px;
}

相关问题
最新问题