Home/ Questions/Q 9035171
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T08:41:33+00:00

I have a search form that should look like this: This is the HTML:

  • 0

I have a search form that should look like this:

enter image description here

This is the HTML:

<form method="post" action="#" class="search-form">
    <input type="text" class="nav-search-input input-initial" data-initial='Search' value="Search">
    <input type="submit" class="nav-search-submit" value="&#57384;"><!-- &#57384; is the code for the Glyphicons search icon -->
</form>

I’m using Bootstrap and Bootstrap Responsive styles, as well as the following styles for the search form:

.search-form{
    display: block;
    margin: 0;
}

input.nav-search-input,
input.nav-search-submit{
    color: #eeeeee;
    background-color: #181818;

    border-top: 1px solid #303030;
    border-bottom: 1px solid #303030;
}

input.nav-search-input{
    width: 90px;
    height: 20px;

    -moz-transition:border-color 75ms;
    -o-transition:border-color 75ms;
    -webkit-transition:border-color 75ms;

    outline: 0!important;
    -webkit-appearance:none!important;
    box-shadow: none!important;
    -moz-box-shadow: none!important;
    -webkit-box-shadow: none!important;
    margin-top: 10px;

    padding: 0px 0px 0px 8px;

    line-height: normal;
    font-weight: normal;
    font-size: 14px;

    border-right: none;
    border-left: 1px solid #303030;

    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;


    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-left-radius: 10px;

    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;

}

input.nav-search-submit{
    font-family: Glyphicons;

    box-sizing: content-box;

    padding: 0px 6px 0px 5px;

    color: #aaaaaa;

    -moz-transition:border-color 75ms;
    -o-transition:border-color 75ms;
    -webkit-transition:border-color 75ms;

    border-left: none;
    border-right: 1px solid #303030;

    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    border-top-right-radius: 10px;

    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
}

This works great on Chrome, Firefox, and Safari, but Opera is rendering the form like this:

enter image description here

The version of Opera in question is 12.02.

It appears to be an issue with the padding. I’ve tried the solutions listed in this question to no avail. If I increase the top and bottom padding to make it look correct in Opera, it no longer looks correct in the other browsers.

Here is a working version of the page.

Side note, I haven’t tested in IE as I’m on a Mac.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Couple of thoughts:

    1. You’re relying on a font to produce that magnifying glass… That’s
      risky. Some devices don’t support @face fonts (replace Glyphicons
      with Droid Sans, and you’ll see what some of your users are going to
      get – padding won’t matter)

    2. Have you simply tried using <input type="image"...>

    3. Have you tried using { background:url('mag-glass') }

    I’ve got $50 that says your problem has to do with how opera is rendering that font, or the line-height of that font. And yes — fixing that for Opera will jack FF, Chrome, and Safari up.

    Also, I buzzed through your CSS files, and didn’t see a CSS reset. See Eric Meyer’s CSS reset for more info. Takes a lot of the little headaches away when everything has been ‘equalized’ in a reset.

    • 0