Form input is not clickable on an inline form

With the latest update of Chrome to revision 19.0.1084.52 we notice some strange behavior on forms on our website.

When the form has a style with display:inline and position:relative and the input is wrapped in a div that floats then the input is not selectable anymore

Here is the most simple example of the bug (check it in Chrome)

<!DOCTYPE HTML>
 <html>
<head>
<title>Testcase input not selectable</title>

</head>
<body>

    <form action="" method="get" style="display:inline; position:relative">
        <div>
            <label>test1</label>
            <input id="test1" name="test1" type="text" value="clickable"/>
        </div>
        <div style="float: left;">
            <label>test2</label>
            <input id="test2" name="test2" type="text" value="not clickable"/>
        </div>
        <div style="clear:both;"><input type="submit" value="submit"></div>
    </form>

</body>
</html>

Is this a browser bug or is this style not possible?

Answers


Hey replace float:left into inline-block

As like this

<form action="" method="get" style="display:inline; position:relative">
    <div>
        <label>test1</label>
        <input id="test1" name="test1" type="text" value="clickable"/>
    </div>
    <div style="display:inline-block;"> 
        <label>test2</label>
        <input id="test2" name="test2" type="text" value="not clickable"/>
    </div>
    <div style="clear:both;"><input type="submit" value="submit"></div>
</form>

Live demo http://jsfiddle.net/t4a3r/ ‚Äč


Need Your Help

Android titanium App crashes after using on-screen nav bar

android titanium titanium-mobile

I have created an app using titanium appcelerator, the app uses a tab group. when i use the hardware nav buttons on a samsung galaxy it works fine, however when I enable the on-screen nav bar and d...

EditText Field not working good when run the app

android xml android-layout

Developing an app which have 9 edittext fields.