When in focus, the input element obscures the button

When I click the input element with a button, it covers the button. Can you help me fix this issue?

.btn-search {
  width: 200px;
  padding: 10px;
  border-radius: 50px;
  position: fixed;
  margin-left: -100px;
  display: inline-block;
  vertical-align: middle;
}

.input-search {
  padding: 22px;
  border-radius: 50px;
  position: static;
}
<div class="input-group">
  <input type="text" class="form-control input-search" placeholder="Recipient's username">
  <div>
    <button class="btn btn-success btn-search" type="button">Button</button>
  </div>
</div>

htmlcssbootstrap-4

Answer №1

To ensure the button appears correctly, adjust the z-index value for the button element. Simply create a new class specifically for the button and assign it a z-index of 99.

For instance, you can implement this through the following CSS rule:

.button {
    z-index: 99 !important;
}

Answer №2

.btn-search {
  width: 200px;
  padding: 10px;
  border-radius: 50px;
  position: fixed;
  margin-left: -100px;
  display: inline-block;
  vertical-align: middle;
  z-index:999 !important;
}

To ensure the button is always displayed above other elements, set a higher z-index value than surrounding elements.

Answer №3

Why include its own stylesheet when using Bootstrap 4?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1N" crossorigin="anonymous">
<div class="input-group">
  <input type="text" class="form-control input-search" placeholder="Recipient's username">
  <div>
    <button class="btn btn-success btn-search" type="button">Button</button>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating JavaScript variables to enhance HTML attributes

Currently utilizing Backbone.js and in search of a solution to convert my data into hidden elements within a form for submission, as well as turning the data into values for textboxes. I am seeking a reliable solution that can effectively handle all speci ...

javascripthtmlbackbone.js

Angular: Maximizing Input and Output

I'm having trouble with the function displaying within the input field. My goal is to simply allow the user to enter a name and have it displayed back to them. HTML: <div ng-app = "mainApp" ng-controller = "studentController"> <tr> < ...

javascripthtmlangularjsinputoutput

Middle position of the rotating display

Currently working on a shop's image carousel where I'm implementing scroll-snap-type: x mandatory; for the container and scroll-snap-align: center; for the images. However, running into a challenge where the container sometimes exceeds the width ...

htmlcss

Is there a way to replace a text box with a <label>, <div>, or <span> using jQuery?

Currently, I am working on "single sourcing" a form page that can switch between edit mode and view mode. Rather than utilizing the ASP.Net FormView or DetailsView controls, I am exploring alternative methods. One of the challenges I encountered is that t ...

asp.netjavascriptjqueryhtml

What are the recommended web-safe colors to use for styling an <hr> element?

Having an <hr> element with the color #ac8900 is what I require. When I apply the style in the traditional way <hr color="#ac8900"> it functions perfectly. However, the expectation is to style everything using CSS, so I attempted the followin ...

css

Toggle Visibility of Div Based on Matching Class Name When Clicked

Just delving into the world of jQuery and could use some guidance. Is there a way to show a div with a matching class when a specific button is clicked? For example, clicking on a button with the class '.project1' should display the corresponding ...

javascriptjqueryhtml

The values retrieved from MySQL database are not displaying accurately

After attempting addslashes, mysql_escape_string, and mysql_real-escape_string without success, I'm at a loss for what to try next. ...

phpmysqlhtml

What is the best way to create a border of white space around the background color of a table cell using CSS?

Is there a way to create a white space around the background color of a table cell using CSS? My current code has the background color extend all the way to the edge, and padding only affects the content, not the background color. #main-monitor { widt ...

htmlcsspadding

Perplexed by the Cufon hover issue

I am really frustrated right now because I can't seem to get Cufon working properly. I have a span link with text inside it, and I want the font color to change when hovered over. Cufon.replace('.info-grid a span', { fontFamily: 'Vegur ...

javascripthtmlcsscufon

The functionality of Javascript ceases to operate once I fill out the table

UPDATE: I managed to solve the issue on my own and will mark my answer as accepted in 24 hours according to the system's rules. I've been experimenting with Bootstrap using this repository: https://github.com/BlackrockDigital/startbootstrap-sb-a ...

javascriptphphtmlbootstrap-4

Is there a way to add an extra close button to my modal besides the one on the top left corner?

I'm looking to enhance the functionality of the modal by adding an additional "Cancel" button at the bottom, alongside the option to close the modal using the span. I'm seeking guidance on how to proceed with this enhancement. Any suggestions wou ...

javascripthtmlcss

Multi-tier Dropdown with Dynamic Size Adjustment

I am attempting to adjust the size of a div container within a dropdown menu so that it properly accommodates the text inside. <div class='dropdown'> <button class ="dropbtn"><b>Hover!</b></button> <div c ...

htmlcss

Layout featuring center-aligned fixed-width design with elements stretching across the entire width of the page

How can I create a centered fixed-width layout for my page while also having headings with a background that extends over the whole page, without having to break up the single fixed-width+margin auto div into many separate divs? ...

htmlcss

Enhance the progression bar using JavaScript

Is there a way to dynamically update a progress bar in HTML while a function is running? function fillProgressBar() { var totalIterations = 100; for (var i = 1; i <= totalIterations; i++) { //perform calculations progressBarWidth = (i/to ...

javascripthtmlcss

PHP code not functioning properly due to div tag

How can I style a sentence within PHP using echo to display a div? The CSS seems correct, but the styling is not being applied. I believe there might be an issue with how I am calling a div within PHP. Can you please provide some advice? This is what I ha ...

phpcss

Tips for increasing the size of a gwt menuitem when hovering over it

I am facing an issue with my gwt menu bar. I want to make it so that when I hover over a menu item, only that specific item grows in size. However, the problem is that when I use CSS to adjust the height of the hovered item, all menu items are affected. Ha ...

cssgwtanimationmenubar

JavaScript code to read a .txt file

Is it possible to use JavaScript to read a text file directly with the file path provided in the code, rather than selecting the file from an open file window? ...

javascripthtml

When accessing xmlHttp responseText, it displays the contents of the PHP file instead of outputting the results of executing

I have two programs, test.html and test.php test.html: <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js" ...

phphtml

Python Parsing HTML content

The problem at hand involves the inability to navigate to the next page on an HTML page. Upon accessing an HTML page displaying search results, a line of numbers is available at the bottom to select the desired page i.e. "1 2 3 4 next" - clicking on "2" re ...

pythonhtmlpython-2.7selenium-webdriverhtml-content-extraction

Issues have been reported with Safari mobile on iOS version 10.2.1 where CSS links are not being detected

I am in the process of creating a website using HTML, PHP, JavaScript, and CSS. All three languages are included in the same document with a link to an external CSS file. As I test for browser compatibility, I discovered that Safari on iOS 10.2.1 is unable ...

javascriptphphtmlcssmobile-safari