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

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

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>

Как видите, когда я нажимаю в поле ввода, кнопка исчезает. Когда я щелкаю за пределами этой формы, она снова появляется. Но я не хочу, чтобы он исчезал при нажатии на поле ввода. Как я могу это сделать?

Я получаю эту ошибку... { "message": "Ошибка скрипта.", "filename": "", "lineno": 0, "colno": 0 }

— 24.04.2019 09:20

Хм. Я думаю, что кнопка исчезает, потому что. текстовое поле расширяется за кнопку. Уменьшите ширину ввода текста, и это может сработать...

— 24.04.2019 09:23

Кнопка все еще там - она просто закрыта полем ввода. Вы можете видеть, что поле ниже обычно является кнопкой, а затем оно появляется сверху, когда вы нажимаете на него.

— 24.04.2019 09:23

@AjayKulkarni не рекомендуется показывать кнопка поиска с помощью position: absolute в поле input. Предположим, у вас есть длинный контент в вашем input, тогда ваш кнопка поиска будет перекрывать ваш контент. В настоящее время это происходит в вашем коде.

— 24.04.2019 09:35

Можете ли вы объяснить, ПОЧЕМУ вы хотите, чтобы кнопка перекрывала ввод? Может быть, мы придумаем другое решение.

— 24.04.2019 10:13

Добавьте padding-right: 45px; к .add-on input, чтобы решить проблему, которую описывает @HassanSiddiqui.

— 29.04.2019 09:35

javascript css html

24.04.2019 09:18

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

369

Перейти к ответу Данный вопрос помечен как решенный

Ответы 9

Вы должны установить 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>

что выводит кнопку за пределы поля ввода. Я хочу, чтобы он оставался внутри поля ввода.

— 24.04.2019 09:23

24.04.2019 09:22

Ответ принят как подходящий

используйте 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>

24.04.2019 09:24

Установите z-index: 1 на элемент #srch-term

24.04.2019 09:25

Измените 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;
}

24.04.2019 09:26

Просто дайте более высокое значение 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>

24.04.2019 09:27

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

24.04.2019 09:30

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

24.04.2019 09:31

просто добавьте 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;
}

Это ничем не отличается от любого другого ответа.

— 24.04.2019 09:43

24.04.2019 09:42

Solution 1 - Change z-index: 2 to z-index: 3 in .add-on button, but if your content increase the search button will overlap with content.

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>

Solution 2 - Remove position: absolute, top: 2px, right: 3px, z-index: 2 from .add-on button and update height: 33px; to height: 38px; in .add-on button, it'll display search next to input field and it'll not overlap content.

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>

24.04.2019 09:51

Другие вопросы по теме

Как стилизовать, выравнивать контент в React UI Semantic

Карты одинаковой высоты в пользовательском интерфейсе материалов

Выравнивание текста таблицы HTML (тело адаптировано к объявлению)

Как разорвать наследование от класса родительского элемента в CSS?

Bootstrap 4 Группа кнопок выравнивания по правому краю внутри группы списка

Таблица JS Autobuild с массивом словарей из списка категорий

Настройки полосы прокрутки, поддерживаемые W3C

Для динамических данных с использованием тега p в той же строке

Как эффективно запрашивать элемент по индексу

:after не относится к родителю

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

Ответы 9

Другие вопросы по теме

Похожие вопросы