CODEWITHSUNDEEP
javascripthtmlcss
Daniel J Abraham
Daniel J Abraham

Reputation: 254

Input tag are not able to focused using mouse

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 ?

Upvotes: 0

Views: 102

Answers (5)

code.rider
code.rider

Reputation: 1897

Every thing is working whats the problem
Snippet

.bla {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0px;
  overflow: hidden;
  background: #4d4d4d;
  background: -webkit-linear-gradient(top left, #4d4d4d 0%, #999999 100%);
  background: linear-gradient(to bottom right, #4d4d4d 0%, #999999 100%);
}

.bg-bubbles {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
}

.bg-bubbles li {
 position: absolute;
 list-style: none;
 display: block;
 width: 40px;
 height: 40px;
 background-color: rgba(255, 255, 255, 0.15);
 bottom: -160px;
 -webkit-animation: square 25s infinite;
 animation: square 25s infinite;
 -webkit-transition-timing-function: linear;
 transition-timing-function: linear;
}

.bg-bubbles li:nth-child(1) {
  left: 10%;
}

.bg-bubbles li:nth-child(2) {
 left: 20%;
 width: 80px;
 height: 80px;
 -webkit-animation-delay: 2s;
 animation-delay: 2s;
 -webkit-animation-duration: 17s;
 animation-duration: 17s;
}

.bg-bubbles li:nth-child(3) {
 left: 25%;
 -webkit-animation-delay: 4s;
 animation-delay: 4s;
}

.bg-bubbles li:nth-child(4) {
 left: 40%;
 width: 60px;
 height: 60px;
 -webkit-animation-duration: 22s;
 animation-duration: 22s;
 background-color: rgba(255, 255, 255, 0.25);
}

.bg-bubbles li:nth-child(5) {
 left: 70%;
}

.bg-bubbles li:nth-child(6) {
 left: 80%;
 width: 120px;
 height: 120px;
  -webkit-animation-delay: 3s;
 animation-delay: 3s;
 background-color: rgba(255, 255, 255, 0.2);
}

.bg-bubbles li:nth-child(7) {
 left: 32%;
  width: 160px;
 height: 160px;
 -webkit-animation-delay: 7s;
 animation-delay: 7s;
}

.bg-bubbles li:nth-child(8) {
 left: 55%;
 width: 20px;
 height: 20px;
 -webkit-animation-delay: 15s;
 animation-delay: 15s;
 -webkit-animation-duration: 40s;
 animation-duration: 40s;
}

.bg-bubbles li:nth-child(9) {
 left: 25%;
 width: 10px;
 height: 10px;
 -webkit-animation-delay: 2s;
 animation-delay: 2s;
 -webkit-animation-duration: 40s;
 animation-duration: 40s;
 background-color: rgba(255, 255, 255, 0.3);
}

.bg-bubbles li:nth-child(10) {
 left: 90%;
 width: 160px;
 height: 160px;
 -webkit-animation-delay: 11s;
 animation-delay: 11s;
}

@-webkit-keyframes square {
 0% 	{
  -webkit-transform: translateY(0);
  transform: translateY(0);
 }
 100%{
  -webkit-transform: translateY(-700px) rotate(600deg);
  transform: translateY(-700px) rotate(600deg);
 }
}

@keyframes square {
 0% 	{
   -webkit-transform: translateY(0);
   transform: translateY(0);
 }
 100%{
   -webkit-transform: translateY(-700px) rotate(600deg);
   transform: translateY(-700px) rotate(600deg);
 }
}
<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>

Upvotes: 0

LoneRanger
LoneRanger

Reputation: 117

change bg-bubbles class position property from absolute to relative.

.bg-bubbles {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

Upvotes: 0

John London
John London

Reputation: 1412

Another solution is disabling pointer event for bubble div.

.bg-bubbles {
  z-index: 1;
  pointer-events: none;
}

Upvotes: 0

Mukesh Ram
Mukesh Ram

Reputation: 6328

It because your bubble div was overlay on that. It have position: absolute and z-index so that it was overlay to your continer.

So, that you need fix .test-continer div position: absolute or relative with z-index more then 1.

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

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128771

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.

Upvotes: 1

Related Questions