CODEWITHSUNDEEP
htmlcssinput
Michael Lewis
Michael Lewis

Reputation: 4302

Cannot focus (click into) html input elements

TL;DR click the link

My input elements are on strike and refuse to work. I've stripped this down to isolate the variables, and I've found a few things that fix the problem, but I know there's something else going on here...

http://jsfiddle.net/9PkYG/2/

HTML and CSS per SO guidelines:

<div class="fl half">
    <div class="input-wrap">
        <input />
    </div>
    <div class="input-wrap">
        <input />
    </div>
    <div class="clear"></div>
</div>
<div class="fr half">
    <div class="input-wrap">
        <input />
    </div>
    <div class="input-wrap">
        <input />
    </div>
    <div class="clear"></div>
</div>
<div class="input-wrap">
    <select>
        <option>Select</option>
    </select>
</div>

CSS: 

.fl { float: left; }
.fr { float: right; }

.half { width: 50%; }

input { border: 1px solid black; }

.input-wrap { margin-bottom: 14px; position: relative; }

.clear { clear: both; }

Upvotes: 5

Views: 18708

Answers (4)

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

In relation to the question: it is also worth noting that if you are trying to focus on a not-natively focusable element, you can try to use the html attribute tabindex to make it focusable.

Upvotes: 0

Jithesh
Jithesh

Reputation: 972

The .input-wrap div is overlapping the inputs. SO, when you click on the inputs, you are actually clicking .input-wrap which is over them.

The reason is that the .half divs that contain the inputs are floating. Easy fix would be to add style clear:both on you existing css add class 'clear' to .input-wrap div.

<div class="input-wrap clear">
    <select>
        <option>Select</option>
    </select>
</div>

See http://jsfiddle.net/mafUh/1/

Upvotes: 6

Michael Lewis
Michael Lewis

Reputation: 4302

Adding position: relative; z-index: 1; to the input {} rule seemed to work, thanks to Musa's suggestion.

http://jsfiddle.net/9PkYG/4/

However, this doesn't seem like the best solution, can you not have input elements inside position: relative???

Ignoring this solution, I'm still looking for a better answer. This seems like a bug... Why would removing the select element, or removing the floats, effect the z-index of the inputs/wrap?

Upvotes: 3

Musa
Musa

Reputation: 97672

Your div .input-wrap is over the input, removing position: relative seems to put it behind the inputs.

.input-wrap { margin-bottom: 14px; }

http://jsfiddle.net/9PkYG/3/

Upvotes: 1

Related Questions