Re: <select> elements are the last of the system widgets to require hacky styling

On Nov 1, 2012, at 8:03 AM, Boris Zbarsky <bzbarsky@MIT.EDU> wrote:

> On 11/1/12 4:17 AM, Markus Ernst wrote:
>> One very basic issue about hackiness in styling the select element is
>> that the following CSS:
>> 
>> input[type=text], select {
>>   width:10em;
>>   border:2px solid red;
>> }
>> 
>> will result in different widths for the text and select boxes. This is
>> totally unintuitive and annoying.
> 
> That's because the select uses border-box box-sizing, right?  Simply resetting the box-sizing so they match will fix that issue, I'd think.
> 
> -Boris

I'm not where I can test right now, but IIRC setting controls to 'box-sizing:border-box' worked reasonably well (the UAs that ignored it measured by outer dimensions anyway). I think there was an issue in Safari that prevented the SELECT from going beyond a certain very limited height. 

It would be nice if border-radius and box-shadow would work on SELECT also.

In the end, I've used the trick of making the SELECT transparent via 'opacity', and overlaying it via negative margin onto an easier to style span. No combination of properties would make it work in IE7-8, but it worked everywhere else, because the opacity and width did not effect the pop-up list of options.

Received on Friday, 2 November 2012 05:30:13 UTC