Daniel Abraham Daniel Abraham - 28 days ago 8
CSS Question

Unable to focus input tag with mouse click

I was adding some background styles and the problem is i could not select the input tags, buttons using mouse, so the problem starts after adding the style.

Here is my code : Input tags not working

<div class="bla">

<div class="test-continer">
<span>Problem: Input tags, Buttons and link tags are <b>not working</b></span>
<h4>when "test-continer" div , h4 (header) and above span is removed its working!</h4>
<input id = "input" type="text">
<button id = "button" onClick = "check()" >Submit</button>
<a href="http://codepen.io/dannibla" class= "article"><strong>What makes this problem ?</strong></a>
</div>

</div>


When the
<div class="test-continer">
,
<h4>
and
<span>
were removed then the
<input>
is working properly, i am confused ?

Answer

Your .big-bubbles element is appearing on top of your .test-continer form. This means that you're clicking on the .big-bubbles element and not within your form control.

You can fix this by giving your .test-continer element a relative position and a z-index greater than 1 (which is the z-index on your .big-bubbles element:

.test-continer {
  position: relative;
  z-index: 2;
}

Modified Codepen demo.