Текст ввода не активируется на mouseclick

Question

Когда пользователь нажимает на центр или в правой части текстовых областей формы (форма входа в систему справа), ничего не произойдет. Он будет работать только в том случае, если пользователь щелкнет слева от этих областей. Это мой jsFiddle.

Это форма:

<form id="login" name="login"> 
    Username<input type="text" name="userid" size="25"/> 
    Password<input type="password" name="pswrd"/> 
    <input type="button" onclick="check(this.form)" value="Login"/> 
    <input type="reset" value="Cancel"/> 
</form> 

Как сделать так, что он будет получать включается, когда пользователь нажимает на любой стороне области текста?

Answer 1

Последняя вещь в вашей таблице стилей это так:

input { 
    width: 10% !important; 
} 

избавиться от правила все вместе, и он будет работать. Это не нужно.

Answer 2

Попробуйте это:

Изменение:

input { 
    width: 10% !important; 
} 

к:

input { 
    width: 100% !important; 
} 

скрипку: http://jsfiddle.net/dxzfbfpf/1/

Answer 3

Последний пункт в вашем CSS является

input { 
    width: 10% !important; 
} 

Удалите его или заместить:

.ui-input-text input { 
    width: 100% !important; 
}