CODEWITHSUNDEEP
csshtmlgoogle-chrome
JavaScripter
JavaScripter

Reputation: 4842

input area Chrome and Firefox behave different

I have an input area:

<input class="input-large" type="text" pattern="[0-9]*" maxlength="5" size="5" autofocus>

css for this input:

              .input-large{

                position: absolute;
                width: 600px;
                margin: 0 auto;

                font-size: 150px;
                text-align: left;
                border: 1;
                letter-spacing: 38px;

            }

I want to achieve this: User can input maximum 5 numbers, if exceeded 5 numbers, the input box stops to show the rest numbers.

When I test it on Firefox, it is fine. However, when I test it on Chrome, Chrome has a yellow focus rectangle which is fine, but when I put in more than 5 numbers, the previous numbers are shifting left bit, they are not stayed fixed like they are like in Firefox.

Anyone knows how to turn off this features of Chrome?

-------------------------------update------------------------------------------

I solved this issue by setting the DIVs all absolute, and wider. This input field is just inside another div. Previously, the outside div is relative. Then I changed back to absolute and adjust the margin. everything works fine now.

Upvotes: 0

Views: 282

Answers (1)

kennypu
kennypu

Reputation: 6051

the yellow focus rectangle is from an outline. just set: outline: none; to get rid of it

Upvotes: 1

Related Questions