Question

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

Chrome

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…

Answer 1

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;
}