CODEWITHSUNDEEP
firefoxinputcursorcss
Donald Jenkins
Donald Jenkins

Reputation: 3505

Cursor position wrong in Firefox input element (searchbox)

I'm having trouble with the cursor in a searchbox that displays too far left in Firefox, whereas it looks fine in Chrome and Safari. The CSS uses Modernizr to display a borderradius where possible, so the issue doesn't concern IE which is served a plain square box.

Here's the HTML:

<form action="/search-results/" id="search" role="search">
<input type="search" placeholder="Search this site here" name="q" results=5 id="q" autocomplete="off" size="31"/>
</form>

The CSS is as follows:

input::-webkit-input-placeholder {
    color:    #999;
}
input:-moz-placeholder {
    color:    #999;

to display the placeholder and

.borderradius #search input#q {
    width: 180px;
    height: 20px;
    font: 11px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    margin: 0;
    padding: 0;
    background: #fcfcfc;
    border: 1px solid #d1d1d1;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

.no-borderradius #search input#q {
    border: 1px solid #ccc;
    background: #eee;
    font: inherit;
    width: 170px;
    height: 20px;
    padding: 0 0 0 8px
}

to style the box.

I also added this:

/* Remove default input type="search styling */
input[type="search"] {
  -webkit-appearance: textfield; /* You could also use none */
}

(which I saw in this article) which has the effect of removing the 'enforced' styling of the Webkit search box—meaning it can then be made to render consistently in Mozilla with the right styling.

Adding the results=5attribute in the input tag, although it doesn't currently validate, displays a magnifying glass in Webkit.

The above code can also be checked online on my site.

The search box displays as follows:

Safari

Safari

Chrome

Chrome

Firefox

Firefox

Firefox doesn't display the magnifying glass, but that's fine. On the other hand, while adjusting the margin and/or padding on the box can correct the wrong (too far left) Firefox cursor display, it necessarily does so at the (unacceptable) cost of pushing it too far right in Webkit browsers. And I haven't found a way of targeting just Mozilla in this instance. Any suggestions welcome...

Upvotes: 0

Views: 3237

Answers (2)

CherryFlavourPez
CherryFlavourPez

Reputation: 7487

This is complex - it seems to me that we've some way to go before native styling of the new form elements works well cross-browser. I have put together a fiddle which shows the code necessary to display your search input properly in both webkit browsers and Firefox.

This article by Trent Walton describes the various properties that affect the appearance of search inputs, and the always brilliant CSS Tricks also has some useful information.

Basically, I've over-ruled the browser's native styling using this code:

-moz-appearance: none;
-webkit-appearance: none;

I've then used the -moz-padding-start property (who knew?) to add some left padding only for Firefox.

So, although that works, it is far from ideal having to jump through those hoops. A note on @tw16's answer: -moz-box-sizing is currently used by even the most recent version of Firefox, but is likely to be replaced by the non-prefixed version in future, which will potentially break that solution. To be fair, -moz-padding-start will presumably be similarly replaced at some point in the future, though the CSS Writing Module seems more obscure (to me at least).

Upvotes: 1

tw16
tw16

Reputation: 29575

To be fair, Firefox isn't displaying the wrong cursor position. If you remove the invalid results attribute, you will see the cursor position is in the same place in webkit.

I am not sure what padding/margins you have tried, but the padding below looked fine in both browsers. The box-sizing: properties are used so that the input acts the same way in all browsers and doesn't make the box bigger with the extra padding.

.borderradius #search input#q{
    padding: 0 0 0 6px;
    -webkit-box-sizing: padding-box;
    -moz-box-sizing: padding-box;
    box-sizing: padding-box;
}

Upvotes: 3

Related Questions