Cursor goes beyond in text input in IE10

Question

Well i don't exactly know the right terms in explaining this. But when i use IE, the cursor goes beyond the button if using IE10. In chrome and firefox it just works fine. Let me share an image:

enter image description here

So here. Normally, when you type longer words, the edge will be at the end part of the word. But when using IE10, the cursor goes beyond, or more like the edge of the searched word is already at the back of btn1 and that the cursor will be found after btn1. Sorry for explaining the issue poorly. So my problem is how to fix the problem in the IE10 to make it behave like the one in chrome.

I have found other IE10 problems with text input like having this code

        $("input[name=keywords]:text").blur(function (evt){
            var $element = $(this);
            $element.val($element.val());
        });

but still no effect.

[UPDATE]

    #inputField {
        width: 200px;
        position: absolute;
        top: -5px;
        left: 10px;
        padding: 5px 75px 5px 10px;
    }


    <form . . . style="margin-bottom:0px; display:none; position: relative;">
        <input id="inputField" type="text" />
        <input type="image" src="img/btn2.png" "/>
    </form>

Any idea is greatly appreciated.

[WORK AROUND] Since IE10 ignores padding, in order to retain design, i adjusted my input's width..then enclosed them in a white div.

try setting input field to fixed width and see if that helps. — CoR, Aug 20 '14 at 10:38

Viswanath Donthi · Answer 1 · 2014-08-23T10:50:42.843

0

There's a trick to fix this issue. You need to add a transparent background image for your input field.

input{
   background: url("images/pxImage.gif") repeat scroll 0 0 transparent;
}

Download this small image: https://i.stack.imgur.com/nPLOM.gif

edited Aug 23 '14 at 10:50

answered Aug 23 '14 at 10:19

Viswanath Donthi

1,791
1
11
12

download any small image from internet. And add it as transparent background image to input field. That's it, it will solve your issue. – Viswanath Donthi Aug 23 '14 at 10:43
I have provided how to implement it along with a small image of 1px in size. Check it – Viswanath Donthi Aug 23 '14 at 10:53
hmm i dont think you understand the issue. sorry – elL Aug 26 '14 at 03:23

score 0 · Answer 2 · edited Aug 01 '17 at 05:20

0

As per this question:

input[type="text"]::-ms-value {
    /* CSS HERE */
}

it seems useful.

edited Aug 01 '17 at 05:20

Frits

7,341
10
42
60

answered Aug 01 '17 at 02:30

TimLuo

1
1

Cursor goes beyond in text input in IE10

2 Answers2