问题描述:

SELECTs OPTIONs seem to be nasty to get a hold on.

With something like this css-snippet i'm trying to visualize the category of an options-data.

option{

background-repeat: no-repeat;

background-position: 0px 3px;

padding-left: 12px;

padding-top: 0px;

padding-bottom: 0px;

margin-top: 1px;

margin-bottom: 1px;

}

.type1, option[data-cat="T1"] {

background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEWazTL///9Sg7a4AAAAAWJLR0QB/wIt3gAAAAtJREFUCNdjYMAHAAAeAAFuhUcyAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE0LTExLTA1VDA4OjI4OjQwKzAxOjAww0rpAAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0xMS0wNVQwODoyODo0MCswMTowMLIXUbwAAAAASUVORK5CYII=');

}

In this fiddle i am adding simple images to a background of the OPTION-tag. FireFox and Chrome are showing these as expected but IE11 seem to be ignoring or hiding them.

Any way to make IE11 show (or fake) them?

网友答案:

There is quite a few reasons why this wont ever work.

and even more why you just shouldn't bother.

Basically Select & Option Box's are defined by the OS, User Specific Settings & the Browser.

This is for many reason one main reason being usability.

Styling the outer box etc is usually not a problem but the style with in the select or Option is just not even worth trying to edit.

If you want to create something like this that you have full control over I would advise you use List Items instead as they will offer the flexibility you are after.

相关阅读:
Top