Исчезающая кнопка в HTML - PullRequest
Новая
       1

Исчезающая кнопка в HTML

5 голосов
/ 24 апреля 2019

Я написал простое поле ввода с кнопкой в ​​нем. Код приведен ниже. 

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 ]

7 голосов
/ 24 апреля 2019

Set z-index: 1 on #srch-term element

4 голосов
/ 24 апреля 2019

Измените 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;
}
4 голосов
/ 24 апреля 2019

использование 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 голосов
/ 24 апреля 2019

Просто дайте более высокое значение 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>
0 голосов
/ 24 апреля 2019

Решение 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 и обновить *От 1023 * до 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;
}
<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>
0 голосов
/ 24 апреля 2019

просто добавьте 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;
}
0 голосов
/ 24 апреля 2019

Проблема исчезнет, ​​если я добавлю z-index: 1 к входу и z-index: 3 к кнопке. Не могу понять почему, но z-index: 2 на кнопке, кажется, не работает.

0 голосов
/ 24 апреля 2019

Как говорят другие, поле ввода закрывает кнопку, когда она находится в фокусе.Попробуйте установить постоянный 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>
0 голосов
/ 24 апреля 2019

Вы должны установить 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...