CODEWITHSUNDEEP
htmlcssopera
Steven Lu
Steven Lu

Reputation: 43447

html drop-down <select> on Opera is missing padding

On IE9, Firefox, and Chrome my dropdown lists look great. But Opera's are missing 2-3 pixels of padding, and I've got some forms with single-character entries in these menus and it looks bad.

A space on either side will make it look good but it will look bad on the rest of the browsers, and also will screw up my scripts.

Upvotes: 0

Views: 955

Answers (3)

hallvors
hallvors

Reputation: 6229

Thanks for the demo. Adding certain styles to SELECT has side effects, looks like a layout bug. What about adding something like this:

    width: 2em;
    text-align:center;

? I have not tested it in other browsers but it should merely "reinforce" their default rendering I guess..

Upvotes: 0

Steven Lu
Steven Lu

Reputation: 43447

I did just create this to detect iOS devices: 

138     (function () {
139         // ios detection (select menus are ugly)
140         if (navigator.userAgent.toLowerCase().search('iphone') != -1 || navigator.userAgent.toLo    werCase().search('ipod') != -1 || navigator.userAgent.toLowerCase().search('ipad') != -1 ) {
141             // set css rule for input
142             var style = document.createElement('style');
143             style.setAttribute('type','text/css');
144             style.innerHTML = 'select{ color: #333; }'; // custom css for select on ios
145             document.getElementsByTagName('head')[0].appendChild(style);
146         }
147     })();

I reckon I could do much the same for Opera.

As for the original problem, I made a new site to test the issue: 

1  <head><style type='text/css'>
2  select {
3     background-color: #353535;
4     border: 2px solid #555555;
5     color: #c0c0c0;
6  }
7  </style></head><body>
8  <select>
9     <option>0</option>
10 </select></body>

What's happening is that when I set styles that modify the border OR background-color for the select, it changes from the neat looking dropdown menu style to an old-fashioned looking squarer button, and also it gets rid of some padding. Nobody uses Opera, though, so I probably won't ever get around to "fixing" the problem.

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

Hard to tell without the code.

However, you could use jQuery to target only Opera:

if($.browser.opera){
    $('select').css(//DO WHATEVER);
}

This would leave the other browsers untouched.

Fwiw... I would check your visitor stats. Opera use may be so low/non-existent that fixes may be unnecessary.

Upvotes: 2

Related Questions